<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ViNote - AI视频笔记</title>
    <link rel="icon" type="image/jpeg" href="/static/zlab.jpeg" style="border-radius: 50%;">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <!-- 搜索Agent专用样式 -->
    <link rel="stylesheet" href="/static/css/search-agent.css">
    <!-- Markdown渲染库 -->
    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
    <style>
        :root {
            /* 柔和的深色背景 */
            --bg-primary: #0f0f0f;
            --bg-secondary: #1a1a1a;
            --bg-tertiary: #242424;
            --bg-card: #1c1c1c;
            --bg-hover: #282828;
            
            /* 柔和的文字颜色 */
            --text-primary: #e8e8e8;
            --text-secondary: #a8a8a8;
            --text-muted: #6a6a6a;
            --text-accent: #f0f0f0;
            
            /* 柔和的科技色彩 */
            --accent-blue: #4c8cf5;
            --accent-blue-soft: #5a9cf7;
            --accent-cyan: #06b6d4;
            --accent-green: #22c55e;
            --accent-orange: #fb923c;
            --accent-red: #f87171;
            
            /* 柔和的边框 */
            --border-primary: rgba(255, 255, 255, 0.08);
            --border-secondary: rgba(255, 255, 255, 0.05);
            --border-accent: rgba(255, 255, 255, 0.12);
            
            /* 柔和渐变 */
            --gradient-primary: linear-gradient(135deg, rgba(28, 28, 28, 0.7) 0%, rgba(32, 32, 32, 0.7) 100%);
            --gradient-accent: linear-gradient(135deg, rgba(76, 140, 245, 0.9) 0%, rgba(90, 156, 247, 0.9) 100%);
            --gradient-success: linear-gradient(135deg, rgba(34, 197, 94, 0.9) 0%, rgba(22, 163, 74, 0.9) 100%);
            --gradient-danger: linear-gradient(135deg, rgba(248, 113, 113, 0.9) 0%, rgba(239, 68, 68, 0.9) 100%);
            
            /* 柔和阴影 */
            --shadow-soft: 0 4px 24px rgba(0, 0, 0, 0.15);
            --shadow-soft-hotver: 0 8px 32px rgba(0, 0, 0, 0.2);
            --shadow-card: 0 8px 32px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.05);
            
            /* 柔和光晕 */
            --glow-soft-blue: 0 0 40px rgba(76, 140, 245, 0.15);
            --glow-soft-green: 0 0 40px rgba(34, 197, 94, 0.15);
            --glow-soft-cyan: 0 0 40px rgba(6, 182, 212, 0.12);
            
            /* 圆润的圆角 */
            --border-radius: 16px;
            --border-radius-sm: 12px;
            --border-radius-lg: 24px;
            
            /* 柔和过渡 */
            --transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            --transition-fast: all 0.2s ease;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
            background: var(--bg-primary);
            color: var(--text-primary);
            line-height: 1.6;
            overflow-x: hidden;
            min-height: 100vh;
        }

        /* 动态光晕背景 - 梦幻科技 */
        body::before {
            content: '';
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: 
                radial-gradient(circle at 20% 50%, rgba(76, 140, 245, 0.12) 0%, transparent 60%),
                radial-gradient(circle at 80% 30%, rgba(6, 182, 212, 0.10) 0%, transparent 60%),
                radial-gradient(circle at 50% 80%, rgba(34, 197, 94, 0.08) 0%, transparent 60%);
            pointer-events: none;
            z-index: -2;
            animation: breathe 8s ease-in-out infinite;
        }
        
        /* 动态线条网格 - 科技感 */
        body::after {
            content: '';
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: 
                linear-gradient(90deg, rgba(76, 140, 245, 0.03) 1px, transparent 1px),
                linear-gradient(0deg, rgba(76, 140, 245, 0.03) 1px, transparent 1px),
                linear-gradient(45deg, transparent 48%, rgba(6, 182, 212, 0.05) 49%, rgba(6, 182, 212, 0.05) 51%, transparent 52%),
                radial-gradient(circle, rgba(76, 140, 245, 0.2) 1px, transparent 1px);
            background-size: 100px 100px, 100px 100px, 200px 200px, 150px 150px;
            background-position: 0 0, 0 0, 0 0, 0 0;
            pointer-events: none;
            z-index: -1;
            opacity: 0.6;
            animation: gridFlow 30s linear infinite;
        }
        
        @keyframes breathe {
            0%, 100% { 
                opacity: 0.7;
                transform: scale(1);
            }
            50% { 
                opacity: 1;
                transform: scale(1.02);
            }
        }
        
        @keyframes gridFlow {
            0% { 
                background-position: 0 0, 0 0, 0 0, 0 0;
            }
            100% { 
                background-position: 100px 100px, 0 100px, 200px 200px, 150px 150px;
            }
        }

        /* 主容器 - 左右布局 */
        .main-container {
            display: grid;
            grid-template-columns: 420px 1fr;
            height: 100vh;
            gap: 0;
        }

        @media (max-width: 1024px) {
            .main-container {
                grid-template-columns: 1fr;
                height: auto;
            }
        }

        /* 左侧控制面板 - 柔和渐变 */
        .left-panel {
            background: linear-gradient(180deg, rgba(15, 15, 15, 1) 0%, rgba(20, 20, 20, 1) 100%);
            border-right: none;
            padding: 40px 24px;
            overflow-y: auto;
            overflow-x: hidden;
            position: relative;
            /* 隐藏滚动条但保留滚动功能 */
            scrollbar-width: none; /* Firefox */
            -ms-overflow-style: none; /* IE/Edge */
        }

        /* 隐藏滚动条 - Chrome/Safari */
        .left-panel::-webkit-scrollbar {
            display: none;
        }

        .left-panel::before {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            width: 1px;
            height: 100%;
            background: linear-gradient(180deg, transparent 0%, rgba(76, 140, 245, 0.2) 50%, transparent 100%);
            opacity: 0.6;
            /* 移除动画避免触发重绘 */
        }

        /* 右侧内容区域 */
        .right-panel {
            padding: 40px;
            overflow-y: auto;
            position: relative;
        }


        @media (max-width: 1024px) {
            .left-panel, .right-panel {
                padding: 20px;
            }
        }

        /* 顶部导航栏 */
        .header {
            text-align: center;
            margin-bottom: 40px;
            position: relative;
        }

        .header::after {
            content: '';
            position: absolute;
            bottom: -20px;
            left: 50%;
            transform: translateX(-50%);
            width: 60px;
            height: 2px;
            background: var(--gradient-accent);
            border-radius: 1px;
        }

        .header h1 {
            font-size: 2rem;
            font-weight: 800;
            margin-bottom: 12px;
            background: linear-gradient(135deg, #ffffff 0%, #4c8cf5 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            letter-spacing: -0.025em;
            filter: drop-shadow(0 0 30px rgba(76, 140, 245, 0.15));
        }

        .header p {
            font-size: 0.9rem;
            color: var(--text-secondary);
            font-weight: 400;
        }

        /* 右上角工具栏 - 语言切换 + 联系作者并排 */
        .top-right-toolbar {
            position: absolute;
            top: 0;
            right: 0;
            z-index: 1000;
            display: flex;
            align-items: center;
            gap: 0;
        }

        .lang-toggle-btn {
            background: transparent;
            border: none;
            color: var(--text-secondary);
            padding: 10px 18px;
            cursor: pointer;
            font-weight: 600;
            transition: var(--transition);
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 0.9rem;
            height: 44px;
        }

        .lang-toggle-btn:hover {
            color: var(--accent-blue);
            transform: translateY(-4px);
        }
        
        .lang-toggle-btn i {
            filter: drop-shadow(0 2px 8px rgba(76, 140, 245, 0.2));
            transition: var(--transition);
        }
        
        .lang-toggle-btn:hover i {
            filter: drop-shadow(0 4px 16px rgba(76, 140, 245, 0.4));
            transform: scale(1.15);
        }
        
        /* 紧凑版联系作者按钮 - 透明背景，类似功能模块 */
        .contact-author-compact {
            position: relative;
        }
        
        .contact-btn-compact {
            width: 68px;
            height: 68px;
            background: transparent;
            border: none;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: var(--transition);
            padding: 0;
            position: relative;
        }
        
        /* 图标容器 - 放大尺寸让矢量图内容更清晰 */
        .contact-btn-compact img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            opacity: 0.85;
            transition: var(--transition);
            filter: drop-shadow(0 2px 8px rgba(76, 140, 245, 0.2));
        }
        
        .contact-btn-compact:hover {
            transform: translateY(-4px);
        }
        
        .contact-btn-compact:hover img {
            opacity: 1;
            filter: drop-shadow(0 4px 16px rgba(76, 140, 245, 0.4));
            transform: scale(1.15);
        }

        /* 首页视图 */
        .landing-page {
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
            padding: 80px 120px;
            animation: fadeIn 0.8s ease-out;
        }

        @keyframes fadeIn {
            from { 
                opacity: 0;
                transform: scale(0.95);
            }
            to { 
                opacity: 1;
                transform: scale(1);
            }
        }

        /* 全屏产品特性展示 */
        .features-showcase-fullscreen {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            max-width: 1400px;
            width: 100%;
        }

        .features-showcase-fullscreen h2 {
            font-size: 3rem;
            font-weight: 800;
            margin-bottom: 24px;
            background: linear-gradient(135deg, #ffffff 0%, #4c8cf5 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            filter: drop-shadow(0 0 30px rgba(76, 140, 245, 0.2));
            animation: titlePulse 3s ease-in-out infinite;
        }

        @keyframes titlePulse {
            0%, 100% {
                filter: drop-shadow(0 0 30px rgba(76, 140, 245, 0.2));
            }
            50% {
                filter: drop-shadow(0 0 40px rgba(76, 140, 245, 0.35));
            }
        }

        .features-showcase-fullscreen p {
            font-size: 1.2rem;
            color: var(--text-secondary);
            margin-bottom: 60px;
            max-width: 700px;
            line-height: 1.8;
        }

        /* 产品特性展示页（工作界面右侧）*/
        .features-showcase {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            min-height: 600px;
            padding: 60px 40px;
            text-align: center;
        }

        .features-showcase h2 {
            font-size: 2.5rem;
            font-weight: 800;
            margin-bottom: 20px;
            background: linear-gradient(135deg, #ffffff 0%, #4c8cf5 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            filter: drop-shadow(0 0 30px rgba(76, 140, 245, 0.2));
        }

        .features-showcase p {
            font-size: 1.1rem;
            color: var(--text-secondary);
            margin-bottom: 60px;
            max-width: 600px;
            line-height: 1.8;
        }

        /* 返回首页按钮 */
        .back-to-home-btn {
            background: rgba(28, 28, 28, 0.7);
            backdrop-filter: blur(10px);
            border: 1px solid var(--border-primary);
            color: var(--text-secondary);
            padding: 12px 20px;
            border-radius: var(--border-radius-sm);
            cursor: pointer;
            font-weight: 600;
            transition: var(--transition);
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 0.9rem;
            margin-bottom: 30px;
            width: 100%;
            justify-content: center;
            font-family: inherit;
        }

        .back-to-home-btn:hover {
            background: rgba(36, 36, 36, 0.9);
            border-color: var(--accent-blue);
            color: var(--accent-blue);
            box-shadow: 0 0 20px rgba(76, 140, 245, 0.2);
            transform: translateX(-3px);
        }

        /* 暂无视频占位 */
        .empty-state {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 400px;
            text-align: center;
            padding: 60px 40px;
        }

        .empty-state i {
            font-size: 80px;
            color: var(--text-muted);
            margin-bottom: 24px;
            opacity: 0.3;
            animation: float 3s ease-in-out infinite;
        }

        .empty-state p {
            font-size: 1.2rem;
            color: var(--text-secondary);
            margin-bottom: 12px;
        }

        .empty-state .hint {
            font-size: 0.95rem;
            color: var(--text-muted);
        }

        .features-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            row-gap: 60px;
            column-gap: 120px;
            max-width: 1400px;
            width: 100%;
        }

        .feature-card {
            background: transparent;
            backdrop-filter: none;
            border: none;
            border-radius: 0;
            padding: 0;
            transition: var(--transition);
            position: relative;
            overflow: visible;
        }

        /* 已实现的模块 - 无边框卡片 */
        .feature-card-ready {
            background: transparent;
            border: none;
        }

        .feature-card-ready:hover {
            background: transparent;
            border: none;
        }
        

        /* 待开发的模块 - 无边框卡片 */
        .feature-card-pending {
            background: transparent;
            border: none;
            opacity: 0.75;
        }

        .feature-card-pending:hover {
            opacity: 1;
            background: transparent;
        }
        

        /* 状态标签 - 图标右上角徽章样式（低调版）*/
        .feature-status {
            position: absolute;
            top: -6px;
            right: -6px;
            padding: 2px 6px;
            border-radius: 8px;
            font-size: 0.55rem;
            font-weight: 500;
            background: rgba(76, 140, 245, 0.25);
            color: rgba(76, 140, 245, 0.9);
            border: 1px solid rgba(76, 140, 245, 0.4);
            letter-spacing: 0.2px;
            text-transform: uppercase;
            box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
            z-index: 10;
            backdrop-filter: blur(8px);
        }

        .feature-status-pending {
            background: rgba(251, 146, 60, 0.2);
            color: rgba(251, 146, 60, 0.9);
            border-color: rgba(251, 146, 60, 0.35);
        }
        
        .feature-card {
            position: relative;
        }


        .feature-card:hover {
            transform: translateY(-12px);
            border: none;
            box-shadow: none;
        }

        .feature-icon {
            width: 80px;
            height: 80px;
            margin: 0 auto 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            background: linear-gradient(135deg, rgba(76, 140, 245, 0.15) 0%, rgba(6, 182, 212, 0.15) 100%);
            font-size: 36px;
            color: var(--accent-blue);
            transition: var(--transition);
            box-shadow: 0 4px 20px rgba(76, 140, 245, 0.2);
            animation: iconBreathe 3s ease-in-out infinite;
        }
        
        @keyframes iconBreathe {
            0%, 100% {
                box-shadow: 0 4px 20px rgba(76, 140, 245, 0.2);
                transform: scale(1);
            }
            50% {
                box-shadow: 0 6px 28px rgba(76, 140, 245, 0.4);
                transform: scale(1.05);
            }
        }
        
        .feature-card:hover .feature-icon {
            animation: none;
            transform: scale(1.15) rotateY(10deg);
            box-shadow: 0 8px 32px rgba(76, 140, 245, 0.5);
        }

        @keyframes pulse {
            0%, 100% {
                box-shadow: 0 0 0 0 rgba(76, 140, 245, 0.4);
            }
            50% {
                box-shadow: 0 0 0 20px rgba(76, 140, 245, 0);
            }
        }

        .feature-title {
            font-size: 1.3rem;
            font-weight: 700;
            color: var(--text-primary);
            margin-bottom: 16px;
            text-align: center;
        }

        .feature-description {
            font-size: 0.92rem;
            color: var(--text-secondary);
            line-height: 1.7;
            text-align: center;
        }

        .cta-button {
            margin-top: 40px;
            padding: 18px 40px;
            font-size: 1.1rem;
            background: var(--gradient-accent);
            border: none;
            border-radius: var(--border-radius-sm);
            color: white;
            font-weight: 700;
            cursor: pointer;
            transition: var(--transition);
            box-shadow: 0 8px 24px rgba(76, 140, 245, 0.3);
        }

        .cta-button:hover {
            transform: translateY(-3px);
            box-shadow: 0 12px 32px rgba(76, 140, 245, 0.5);
        }

        /* 响应式 */
        @media (max-width: 768px) {
            .features-showcase h2 {
                font-size: 2rem;
            }
            
            .features-grid {
                grid-template-columns: 1fr;
                gap: 20px;
            }
        }

        /* 装饰性元素 */
        .decorative-elements {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            overflow: hidden;
            z-index: 0;
        }

        .deco-circle {
            position: absolute;
            border-radius: 50%;
            border: 1px solid rgba(76, 140, 245, 0.1);
        }

        .deco-circle.deco-1 {
            width: 200px;
            height: 200px;
            top: 10%;
            left: -50px;
            animation: float 8s ease-in-out infinite;
        }

        .deco-circle.deco-2 {
            width: 150px;
            height: 150px;
            bottom: 20%;
            right: -30px;
            animation: float 10s ease-in-out infinite reverse;
        }

        .deco-line {
            position: absolute;
            height: 1px;
            background: linear-gradient(90deg, 
                transparent 0%, 
                rgba(76, 140, 245, 0.15) 50%, 
                transparent 100%);
        }

        .deco-line.deco-3 {
            width: 60%;
            top: 30%;
            left: -10%;
            transform: rotate(-15deg);
            animation: slide 12s ease-in-out infinite;
        }

        .deco-line.deco-4 {
            width: 50%;
            bottom: 35%;
            right: -10%;
            transform: rotate(20deg);
            animation: slide 15s ease-in-out infinite reverse;
        }

        @keyframes float {
            0%, 100% {
                transform: translateY(0) scale(1);
                opacity: 0.3;
            }
            50% {
                transform: translateY(-20px) scale(1.05);
                opacity: 0.5;
            }
        }

        @keyframes slide {
            0%, 100% {
                transform: translateX(0) rotate(-15deg);
                opacity: 0.2;
            }
            50% {
                transform: translateX(20px) rotate(-15deg);
                opacity: 0.4;
            }
        }

        /* 卡片样式 - 玻璃态效果 */
        .card {
            background: rgba(28, 28, 28, 0.7);
            backdrop-filter: blur(20px) saturate(180%);
            border: 1px solid rgba(255, 255, 255, 0.05);
            border-radius: var(--border-radius);
            padding: 24px;
            margin-bottom: 20px;
            box-shadow: var(--shadow-card);
            position: relative;
            overflow: hidden;
            transition: var(--transition);
        }

        .card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 1px;
            background: linear-gradient(90deg, transparent 0%, rgba(76, 140, 245, 0.3) 50%, transparent 100%);
        }

        .card:hover {
            transform: translateY(-2px);
            box-shadow: 
                0 12px 40px rgba(0, 0, 0, 0.25),
                0 0 0 1px rgba(76, 140, 245, 0.2),
                inset 0 1px 0 rgba(255, 255, 255, 0.08);
        }

        /* 表单样式 */
        .form-group {
            margin-bottom: 20px;
        }

        .form-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: 600;
            color: var(--text-primary);
            font-size: 0.9rem;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .form-control {
            width: 100%;
            padding: 16px 20px;
            background: rgba(26, 26, 26, 0.6);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: var(--border-radius-sm);
            color: var(--text-primary);
            font-size: 15px;
            transition: var(--transition);
            font-family: inherit;
        }

        .form-control:focus {
            outline: none;
            background: rgba(28, 28, 28, 0.8);
            border-color: rgba(76, 140, 245, 0.4);
            box-shadow: 
                0 0 0 4px rgba(76, 140, 245, 0.08),
                0 4px 16px rgba(76, 140, 245, 0.15);
        }

        .form-control::placeholder {
            color: var(--text-muted);
        }

        /* Select下拉框特殊样式 */
        select.form-control {
            cursor: pointer;
            appearance: none;
            -webkit-appearance: none;
            -moz-appearance: none;
            background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234c8cf5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
            background-repeat: no-repeat;
            background-position: right 12px center;
            background-size: 20px;
            padding-right: 40px;
        }

        /* 下拉选项样式 */
        select.form-control option {
            background: var(--bg-secondary);
            color: var(--text-primary);
            padding: 12px 20px;
        }

        select.form-control option:hover,
        select.form-control option:checked {
            background: var(--bg-tertiary);
            color: var(--accent-blue);
        }

        .form-row {
            display: flex;
            gap: 12px;
            align-items: end;
        }

        .form-row .form-control {
            flex: 1;
            min-width: 0; /* 确保可以缩小 */
        }

        /* 按钮样式 - 柔和渐变 */
        .btn {
            background: linear-gradient(135deg, rgba(76, 140, 245, 0.9) 0%, rgba(90, 156, 247, 0.9) 100%);
            color: white;
            border: none;
            padding: 16px 28px;
            border-radius: var(--border-radius-sm);
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            transition: var(--transition);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            text-decoration: none;
            min-height: 48px;
            position: relative;
            overflow: hidden;
            font-family: inherit;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            white-space: nowrap;
            box-shadow: 
                0 4px 16px rgba(76, 140, 245, 0.25),
                inset 0 1px 0 rgba(255, 255, 255, 0.2);
        }

        .btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.2) 50%, transparent 100%);
            transition: left 0.6s ease;
        }

        .btn:hover::before {
            left: 100%;
        }

        .btn:hover {
            transform: translateY(-2px);
            box-shadow: 
                0 8px 24px rgba(76, 140, 245, 0.4),
                inset 0 1px 0 rgba(255, 255, 255, 0.3);
        }

        .btn:active {
            transform: translateY(0);
        }

        .btn:disabled {
            background: var(--bg-tertiary);
            cursor: not-allowed;
            transform: none;
            opacity: 0.6;
        }

        .btn:disabled:hover {
            transform: none;
            box-shadow: none;
        }

        .btn-secondary {
            background: var(--bg-tertiary);
            color: var(--text-secondary);
        }

        .btn-secondary:hover {
            background: var(--bg-hover);
            box-shadow: var(--shadow-md);
        }

        .btn-success {
            background: var(--gradient-success);
        }

        .btn-success:hover {
            box-shadow: var(--shadow-lg), var(--glow-green);
        }

        .btn-danger {
            background: var(--bg-tertiary);
            color: var(--text-secondary);
            border: 1px solid var(--border-secondary);
        }

        .btn-danger:hover {
            background: var(--bg-hover);
            border-color: var(--border-accent);
            color: var(--text-primary);
        }

        .btn-sm {
            padding: 10px 16px;
            font-size: 12px;
            min-height: 36px;
        }

        .btn-full {
            width: 100%;
            margin-bottom: 12px;
        }

        /* 右侧视频区域 */
        .video-section {
            position: relative;
            min-height: 400px;
        }

        /* 加载状态 */
        .loading-container {
            display: none;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 400px;
            text-align: center;
            padding: 40px;
        }

        .loading-container.show {
            display: flex;
        }

        .loading-spinner {
            width: 60px;
            height: 60px;
            border: 4px solid var(--bg-tertiary);
            border-radius: 50%;
            border-top-color: var(--accent-blue);
            animation: spin 1s linear infinite;
            margin-bottom: 20px;
        }

        @keyframes spin {
            to { transform: rotate(360deg); }
        }

        .loading-text {
            color: var(--text-secondary);
            font-size: 1.1rem;
            font-weight: 500;
        }

        .loading-subtext {
            color: var(--text-muted);
            font-size: 0.9rem;
            margin-top: 8px;
        }

        /* 视频预览区域 */
        .video-preview {
            display: none !important;
            background: var(--gradient-primary);
            border: 1px solid var(--border-primary);
            border-radius: var(--border-radius);
            padding: 30px;
            box-shadow: var(--shadow-md);
            margin-bottom: 20px;
        }

        .video-preview.show {
            display: block !important;
            animation: fadeInUp 0.5s ease-out;
        }

        @keyframes fadeInUp {
            from { 
                opacity: 0; 
                transform: translateY(20px); 
            }
            to { 
                opacity: 1; 
                transform: translateY(0); 
            }
        }

        .video-content {
            display: grid;
            grid-template-columns: 280px 1fr;
            gap: 24px;
            margin-bottom: 24px;
        }

        @media (max-width: 768px) {
            .video-content {
                grid-template-columns: 1fr;
                gap: 16px;
            }
        }


        .video-info {
            padding: 8px 0;
        }

        .video-title {
            font-size: 1.3rem;
            font-weight: 700;
            margin-bottom: 12px;
            color: var(--text-primary);
            line-height: 1.3;
            text-align: center;
            word-wrap: break-word;
            overflow-wrap: break-word;
            word-break: break-word;
        }

        .video-description {
            color: var(--text-secondary);
            margin-bottom: 16px;
            line-height: 1.5;
            font-size: 0.95rem;
        }

        .video-meta {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
            gap: 12px;
        }

        .meta-item {
            padding: 12px 16px;
            background: rgba(26, 26, 26, 0.6);
            backdrop-filter: blur(10px);
            border-radius: var(--border-radius-sm);
            border-left: 3px solid var(--accent-blue);
            transition: var(--transition);
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }

        .meta-item:hover {
            background: rgba(32, 32, 32, 0.8);
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        }

        .meta-label {
            font-size: 0.75rem;
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-bottom: 2px;
        }

        .meta-value {
            font-weight: 600;
            color: var(--text-primary);
            font-size: 0.9rem;
        }

        .video-player {
            margin-top: 20px;
        }

        .video-player iframe {
            width: 100%;
            height: 320px;
            border-radius: var(--border-radius-sm);
            border: none;
        }

        .action-buttons {
            display: flex;
            gap: 12px;
            flex-wrap: wrap;
        }

        /* 进度区域 */
        .progress-section, .download-section {
            display: none;
            background: var(--gradient-primary);
            border: 1px solid var(--border-primary);
            border-radius: var(--border-radius);
            padding: 30px;
            box-shadow: var(--shadow-md);
            margin-bottom: 20px;
        }
        
        /* 当进度区域在视频预览内部时，调整上边距 */
        .video-preview .progress-section {
            margin-top: 30px;
            margin-bottom: 0;
        }

        .progress-section.show, .download-section.show {
            display: block;
            animation: fadeInUp 0.5s ease-out;
        }

        .progress-container {
            position: relative;
            margin: 16px 0;
        }

        .progress-bar {
            width: 100%;
            height: 12px;
            background: rgba(36, 36, 36, 0.5);
            border-radius: 12px;
            overflow: hidden;
            position: relative;
            box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.3);
        }

        .progress-fill {
            height: 100%;
            background: linear-gradient(
                90deg,
                rgba(76, 140, 245, 0.8) 0%,
                rgba(90, 156, 247, 1) 50%,
                rgba(76, 140, 245, 0.8) 100%
            );
            background-size: 200% 100%;
            width: 0%;
            transition: width 0.3s ease;
            position: relative;
            animation: flowLight 2s ease infinite;
        }

        @keyframes flowLight {
            0% { background-position: 200% 0; }
            100% { background-position: -200% 0; }
        }

        .progress-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 12px;
        }

        .progress-header h3 {
            color: var(--text-primary);
            font-size: 1.1rem;
            font-weight: 600;
        }

        .progress-status {
            font-weight: 700;
            color: var(--accent-blue);
            font-size: 1rem;
        }

        .progress-message {
            color: var(--text-secondary);
            font-style: italic;
            margin-top: 8px;
            font-size: 0.9rem;
        }

        .progress-details {
            display: flex;
            justify-content: space-between;
            margin-top: 12px;
            font-size: 0.85rem;
            color: var(--text-muted);
        }

        @media (max-width: 480px) {
            .progress-details {
                flex-direction: column;
                gap: 4px;
            }
        }

        /* 结果区域 */
        .results-section {
            display: none;
            background: var(--gradient-primary);
            border: 1px solid var(--border-primary);
            border-radius: var(--border-radius);
            padding: 30px;
            box-shadow: var(--shadow-md);
            margin-bottom: 20px;
        }

        .results-section.show {
            display: block;
            animation: fadeInUp 0.5s ease-out;
        }

        .content-tabs {
            display: flex;

            border-bottom: 1px solid var(--border-primary);
            margin-bottom: 20px;
            gap: 2px;
        }

        .tab-button {
            background: none;
            border: none;
            padding: 14px 24px;
            color: var(--text-secondary);
            cursor: pointer;
            transition: var(--transition);
            border-radius: var(--border-radius-sm) var(--border-radius-sm) 0 0;
            font-weight: 600;
            font-size: 0.9rem;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            position: relative;
            font-family: inherit;
        }

        .tab-button:hover:not(.active) {
            color: var(--text-primary);
            background: rgba(255, 255, 255, 0.03);
        }

        .tab-button.active {
            color: var(--accent-blue);
            background: rgba(76, 140, 245, 0.08);
        }

        .tab-button.active::after {
            content: '';
            position: absolute;
            bottom: -1px;
            left: 0;
            right: 0;
            height: 2px;
            background: linear-gradient(90deg, transparent 0%, var(--accent-blue) 50%, transparent 100%);
            box-shadow: 0 0 8px rgba(76, 140, 245, 0.5);
        }

        /* 标签页下载图标 - 简洁优雅 */
        .tab-download-icon {
            margin-left: 8px;
            color: var(--text-muted);
            font-size: 0.85em;
            cursor: pointer;
            transition: var(--transition-fast);
            opacity: 0.6;
        }

        .tab-download-icon:hover {
            color: var(--accent-green);
            opacity: 1;
            transform: scale(1.15);
        }

        .tab-button.active .tab-download-icon {
            opacity: 0.8;
            color: var(--text-secondary);
        }

        .tab-button.active .tab-download-icon:hover {
            color: var(--accent-green);
            opacity: 1;
        }

        .tab-content {
            display: none;
            background: var(--bg-secondary);
            border-radius: 0 var(--border-radius-sm) var(--border-radius-sm) var(--border-radius-sm);
            padding: 20px;
            min-height: 240px;
            line-height: 1.6;
            border: 1px solid var(--border-secondary);
            font-size: 0.9rem;
            overflow-x: auto;
        }

        .tab-content.active {
            display: block;
        }

        /* Markdown渲染样式 */
        .tab-content h1, .tab-content h2, .tab-content h3, 
        .tab-content h4, .tab-content h5, .tab-content h6 {
            color: var(--text-primary);
            margin-top: 1.5em;
            margin-bottom: 0.8em;
            font-weight: 700;
            line-height: 1.3;
        }

        .tab-content h1 { font-size: 1.8rem; border-bottom: 2px solid var(--border-primary); padding-bottom: 0.3em; }
        .tab-content h2 { font-size: 1.5rem; border-bottom: 1px solid var(--border-secondary); padding-bottom: 0.3em; }
        .tab-content h3 { font-size: 1.3rem; }
        .tab-content h4 { font-size: 1.1rem; }
        .tab-content h5 { font-size: 1rem; }
        .tab-content h6 { font-size: 0.9rem; color: var(--text-secondary); }

        .tab-content p {
            margin-bottom: 1em;
            line-height: 1.7;
            color: var(--text-primary);
        }

        .tab-content ul, .tab-content ol {
            margin-bottom: 1em;
            padding-left: 2em;
            color: var(--text-primary);
        }

        .tab-content li {
            margin-bottom: 0.5em;
            line-height: 1.6;
        }

        .tab-content code {
            background: rgba(76, 140, 245, 0.1);
            color: var(--accent-blue);
            padding: 2px 6px;
            border-radius: 4px;
            font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
            font-size: 0.9em;
        }

        .tab-content pre {
            background: var(--bg-tertiary);
            border: 1px solid var(--border-primary);
            border-radius: var(--border-radius-sm);
            padding: 16px;
            overflow-x: auto;
            margin-bottom: 1em;
        }

        .tab-content pre code {
            background: none;
            color: var(--text-primary);
            padding: 0;
        }

        .tab-content blockquote {
            border-left: 4px solid var(--accent-blue);
            padding-left: 16px;
            margin: 1em 0;
            color: var(--text-secondary);
            font-style: italic;
        }

        .tab-content a {
            color: var(--accent-blue);
            text-decoration: none;
            transition: var(--transition-fast);
        }

        .tab-content a:hover {
            text-decoration: underline;
            color: var(--accent-blue-soft);
        }

        .tab-content hr {
            border: none;
            border-top: 1px solid var(--border-primary);
            margin: 2em 0;
        }

        .tab-content table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 1em;
        }

        .tab-content th, .tab-content td {
            border: 1px solid var(--border-primary);
            padding: 8px 12px;
            text-align: left;
        }

        .tab-content th {
            background: var(--bg-tertiary);
            font-weight: 600;
            color: var(--text-primary);
        }

        .tab-content img {
            max-width: 100%;
            height: auto;
            border-radius: var(--border-radius-sm);
            margin: 1em 0;
        }

        .tab-content strong {
            color: var(--text-accent);
            font-weight: 600;
        }

        .tab-content em {
            color: var(--text-secondary);
            font-style: italic;
        }

        .download-buttons {
            display: flex;
            gap: 10px;
            margin-top: 20px;
            flex-wrap: wrap;
        }

        /* 下载模态框 */
        .modal {
            display: none;
            position: fixed;
            z-index: 1000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.8);
            backdrop-filter: blur(5px);
        }

        .modal-content {
            background: var(--gradient-primary);
            margin: 10% auto;
            padding: 40px;
            border: 1px solid var(--border-primary);
            border-radius: var(--border-radius);
            width: 90%;
            max-width: 500px;
            box-shadow: var(--shadow-lg);
            position: relative;
        }

        .modal-content::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 1px;
            background: linear-gradient(90deg, transparent 0%, var(--accent-blue) 50%, transparent 100%);
        }

        .modal h3 {
            margin-bottom: 24px;
            color: var(--text-primary);
            font-weight: 700;
            text-align: center;
        }

        .quality-options {
            display: grid;
            gap: 12px;
            margin-bottom: 24px;
        }

        .quality-option {
            padding: 16px 20px;
            background: var(--bg-secondary);
            border: 1px solid var(--border-secondary);
            border-radius: var(--border-radius-sm);
            cursor: pointer;
            transition: var(--transition);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .quality-option:hover {
            background: var(--bg-hover);
            border-color: var(--accent-blue);
        }

        .quality-option.selected {
            background: var(--bg-tertiary);
            border-color: var(--accent-blue);
            box-shadow: var(--glow-blue);
        }

        .quality-label {
            font-weight: 600;
            color: var(--text-primary);
        }

        .quality-size {
            color: var(--text-muted);
            font-size: 0.9rem;
        }

        .modal-actions {
            display: flex;
            gap: 16px;
            justify-content: flex-end;
        }

        .close-modal {
            position: absolute;
            top: 16px;
            right: 20px;
            background: none;
            border: none;
            color: var(--text-muted);
            font-size: 24px;
            cursor: pointer;
            transition: var(--transition-fast);
            padding: 4px;
        }

        .close-modal:hover {
            color: var(--text-primary);
        }

        /* 错误和成功消息 */
        .error-message, .success-message {
            position: fixed;
            top: 20px;
            right: 20px;
            max-width: 400px;
            padding: 16px 20px;
            border-radius: var(--border-radius-sm);
            font-weight: 500;
            z-index: 1001;
            animation: slideInRight 0.3s ease-out;
        }

        .error-message {
            background: linear-gradient(135deg, rgba(239, 68, 68, 0.1) 0%, rgba(220, 38, 38, 0.1) 100%);
            border: 1px solid var(--accent-red);
            color: var(--accent-red);
        }

        .success-message {
            background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(5, 150, 105, 0.1) 100%);
            border: 1px solid var(--accent-green);
            color: var(--accent-green);
        }

        @keyframes slideInRight {
            from { 
                opacity: 0; 
                transform: translateX(100%); 
            }
            to { 
                opacity: 1; 
                transform: translateX(0); 
            }
        }

        /* 响应式设计 */
        @media (max-width: 1024px) {
            .left-panel {
                border-right: none;
                border-bottom: 1px solid var(--border-primary);
            }
            
            .left-panel::before {
                display: none;
            }
        }

        @media (max-width: 768px) {
            .btn-full {
                font-size: 12px;
                padding: 12px 16px;
            }
            
            .form-row {
                flex-direction: column;
                gap: 8px;
            }
            
            .action-buttons {
                justify-content: center;
            }
        }

        /* 带进度条的按钮样式 */
        .btn-with-progress {
            position: relative;
            overflow: hidden;
        }

        .btn-progress-bg {
            position: absolute;
            left: 0;
            top: 0;
            height: 100%;
            width: 0%;
            background: linear-gradient(
                90deg,
                rgba(76, 140, 245, 0.4) 0%,
                rgba(90, 156, 247, 0.6) 100%
            );
            transition: width 0.3s ease;
            z-index: 0;
        }

        .btn-content {
            position: relative;
            z-index: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            width: 100%;
        }

        /* 下载中状态 */
        .btn-downloading {
            background: var(--bg-tertiary) !important;
            color: var(--text-primary) !important;
        }

        .btn-downloading .btn-progress-bg {
            background: linear-gradient(
                90deg,
                rgba(76, 140, 245, 0.3) 0%,
                rgba(90, 156, 247, 0.5) 100%
            );
        }

        .btn-downloading:hover {
            background: var(--bg-hover) !important;
        }

        /* 隐藏类 */
        .hidden {
            display: none !important;
        }

        /* 首页logo - 左上角（只在首页显示）*/
        .landing-logo {
            position: fixed;
            top: 20px;
            left: 20px;
            z-index: 9999;
            max-width: 180px;
            max-height: 80px;
            animation: logoFadeIn 1s ease-out;
        }

        /* 工作界面时隐藏logo */
        #workspacePage ~ .landing-logo {
            display: none;
        }

        @keyframes logoFadeIn {
            from {
                opacity: 0;
                transform: translateY(-10px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .landing-logo img {
            width: auto;
            height: auto;
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
            display: block;
            transition: var(--transition);
            opacity: 0.9;
            filter: drop-shadow(0 2px 12px rgba(76, 140, 245, 0.15));
        }

        .landing-logo:hover img {
            transform: scale(1.08);
            opacity: 1;
            filter: drop-shadow(0 4px 20px rgba(76, 140, 245, 0.3));
        }

        @media (max-width: 768px) {
            .landing-logo {
                top: 15px;
                left: 15px;
                max-width: 120px;
                max-height: 60px;
            }
        }


        /* 联系卡片 - 调整位置到右上角下方 */
        .contact-card {
            position: absolute;
            top: 78px;
            right: 0;
            width: 240px;
            background: rgba(28, 28, 28, 0.85);
            backdrop-filter: blur(25px) saturate(180%);
            border: 1px solid rgba(76, 140, 245, 0.2);
            border-radius: var(--border-radius);
            padding: 16px;
            box-shadow: 
                0 8px 32px rgba(0, 0, 0, 0.4),
                0 0 20px rgba(76, 140, 245, 0.15),
                inset 0 1px 0 rgba(255, 255, 255, 0.05);
            opacity: 0;
            visibility: hidden;
            transform: translateY(10px);
            transition: var(--transition);
            pointer-events: none;
        }

        .contact-card.show {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
            pointer-events: auto;
        }

        .contact-header {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 16px;
            padding-bottom: 12px;
            border-bottom: 1px solid var(--border-primary);
        }

        .contact-header i {
            font-size: 18px;
            color: var(--accent-blue);
        }

        .contact-header h4 {
            font-size: 1rem;
            color: var(--text-primary);
            margin: 0;
        }

        .contact-item {
            margin-bottom: 16px;
        }

        .contact-item:last-child {
            margin-bottom: 0;
        }

        .contact-label {
            display: flex;
            align-items: center;
            gap: 6px;
            margin-bottom: 10px;
            color: var(--text-secondary);
            font-size: 0.85rem;
            font-weight: 600;
        }

        .contact-label i {
            font-size: 14px;
            color: var(--accent-blue);
        }

        .wechat-qr {
            width: 65%;
            margin: 0 auto;
            display: block;
            border-radius: var(--border-radius-sm);
            border: 1px solid var(--border-secondary);
            transition: var(--transition);
        }

        .wechat-qr:hover {
            transform: scale(1.05);
            border-color: var(--accent-blue);
            box-shadow: 0 4px 16px rgba(76, 140, 245, 0.2);
        }

        .contact-email {
            display: block;
            padding: 10px 12px;
            background: rgba(76, 140, 245, 0.1);
            border: 1px solid rgba(76, 140, 245, 0.3);
            border-radius: var(--border-radius-sm);
            color: var(--accent-blue);
            text-decoration: none;
            font-size: 0.85rem;
            transition: var(--transition);
            word-break: break-all;
        }

        .contact-email:hover {
            background: rgba(76, 140, 245, 0.2);
            border-color: var(--accent-blue);
            transform: translateX(3px);
        }

        @media (max-width: 768px) {
            .top-right-toolbar {
                top: 0;
                right: 0;
                gap: 0;
            }
            
            .lang-toggle-btn {
                height: 40px;
                padding: 8px 14px;
                font-size: 0.85rem;
            }
            
            .contact-btn-compact {
                width: 58px;
                height: 58px;
            }

            .contact-card {
                width: 240px;
                top: 68px;
            }
        }

        /* ========== 视频智能问答页面专用样式 ========== */
        
        /* 预处理状态指示器 */
        .preprocess-status {
            padding: 14px 16px;
            border-radius: var(--border-radius-sm);
            margin-bottom: 16px;
            display: flex;
            align-items: center;
            gap: 12px;
            font-size: 0.9rem;
            background: rgba(251, 146, 60, 0.1);
            border: 1px solid rgba(251, 146, 60, 0.3);
            color: var(--accent-orange);
        }

        .preprocess-status.processing {
            background: rgba(76, 140, 245, 0.1);
            border-color: rgba(76, 140, 245, 0.3);
            color: var(--accent-blue);
        }

        .preprocess-status.ready {
            background: rgba(34, 197, 94, 0.1);
            border-color: rgba(34, 197, 94, 0.3);
            color: var(--accent-green);
        }

        /* 快捷问题网格 */
        .quick-questions-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 10px;
        }

        .quick-q-btn {
            background: rgba(28, 28, 28, 0.6);
            border: 1px solid rgba(76, 140, 245, 0.2);
            color: var(--text-secondary);
            padding: 10px 14px;
            border-radius: 20px;
            cursor: pointer;
            transition: var(--transition);
            font-size: 0.85rem;
            font-family: inherit;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .quick-q-btn:hover {
            background: rgba(76, 140, 245, 0.1);
            border-color: var(--accent-blue);
            color: var(--accent-blue);
            transform: translateY(-2px);
        }

        /* 预处理完成提示 */
        .ready-prompt {
            background: var(--gradient-primary);
            border: 1px solid rgba(34, 197, 94, 0.3);
            border-radius: var(--border-radius);
            padding: 40px;
            text-align: center;
            margin-bottom: 20px;
            animation: fadeInUp 0.5s ease-out;
        }

        .ready-icon {
            font-size: 60px;
            margin-bottom: 20px;
        }

        .ready-prompt h3 {
            font-size: 1.5rem;
            color: var(--accent-green);
            margin-bottom: 12px;
        }

        .ready-prompt p {
            color: var(--text-secondary);
            margin-bottom: 30px;
        }

        .quick-suggestions {
            max-width: 500px;
            margin: 0 auto;
        }

        .quick-suggestions p {
            margin-bottom: 16px;
            font-weight: 600;
        }

        .suggestion-chip {
            background: rgba(76, 140, 245, 0.1);
            border: 1px solid rgba(76, 140, 245, 0.3);
            color: var(--accent-blue);
            padding: 10px 20px;
            border-radius: 20px;
            margin: 0 6px 8px 0;
            cursor: pointer;
            transition: var(--transition);
            display: inline-block;
            font-size: 0.9rem;
            font-family: inherit;
        }

        .suggestion-chip:hover {
            background: rgba(76, 140, 245, 0.2);
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(76, 140, 245, 0.2);
        }

        /* 对话区域 */
        .conversation-area {
            background: var(--gradient-primary);
            border: 1px solid var(--border-primary);
            border-radius: var(--border-radius);
            padding: 30px;
            box-shadow: var(--shadow-md);
            min-height: 500px;
            animation: fadeInUp 0.5s ease-out;
        }

        .messages-container {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        /* 对话消息气泡 */
        .message {
            display: flex;
            gap: 12px;
            animation: messageSlideIn 0.3s ease-out;
        }

        @keyframes messageSlideIn {
            from {
                opacity: 0;
                transform: translateY(10px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .message-user {
            flex-direction: row-reverse;
        }

        .message-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            flex-shrink: 0;
        }

        .message-user .message-avatar {
            background: linear-gradient(135deg, rgba(76, 140, 245, 0.2) 0%, rgba(90, 156, 247, 0.2) 100%);
            border: 1px solid rgba(76, 140, 245, 0.3);
            color: var(--accent-blue);
        }

        .message-ai .message-avatar {
            background: rgba(28, 28, 28, 0.8);
            border: 1px solid rgba(255, 255, 255, 0.08);
            color: var(--accent-cyan);
        }

        .message-content {
            max-width: 70%;
        }
        
        .message-user .message-content {
            display: flex;
            flex-direction: column;
            align-items: flex-end;
        }

        .message-bubble {
            padding: 14px 18px;
            border-radius: 18px;
            line-height: 1.6;
            word-wrap: break-word;
            overflow-wrap: break-word;
            word-break: break-word;
        }

        /* 对话消息气泡的Markdown样式 - 优化边距 */
        .message-bubble h1, .message-bubble h2, .message-bubble h3, 
        .message-bubble h4, .message-bubble h5, .message-bubble h6 {
            color: var(--text-primary);
            margin-top: 0.8em;
            margin-bottom: 0.4em;
            font-weight: 700;
            line-height: 1.3;
        }

        /* 第一个标题移除上边距 */
        .message-bubble h1:first-child, .message-bubble h2:first-child, 
        .message-bubble h3:first-child, .message-bubble h4:first-child, 
        .message-bubble h5:first-child, .message-bubble h6:first-child {
            margin-top: 0;
        }

        .message-bubble h1 { font-size: 1.5rem; }
        .message-bubble h2 { font-size: 1.3rem; }
        .message-bubble h3 { font-size: 1.1rem; }
        .message-bubble h4 { font-size: 1rem; }
        .message-bubble h5 { font-size: 0.95rem; }
        .message-bubble h6 { font-size: 0.9rem; }

        .message-bubble p {
            margin: 0 0 0.8em 0;
            line-height: 1.7;
        }

        /* 第一个段落移除上边距，最后一个段落移除下边距 */
        .message-bubble p:first-child {
            margin-top: 0;
        }

        .message-bubble p:last-child {
            margin-bottom: 0;
        }

        .message-bubble ul, .message-bubble ol {
            margin: 0 0 0.8em 0;
            padding-left: 1.5em;
        }

        /* 第一个列表移除上边距，最后一个列表移除下边距 */
        .message-bubble ul:first-child, .message-bubble ol:first-child {
            margin-top: 0;
        }

        .message-bubble ul:last-child, .message-bubble ol:last-child {
            margin-bottom: 0;
        }

        .message-bubble li {
            margin-bottom: 0.3em;
            line-height: 1.6;
        }

        .message-bubble li:last-child {
            margin-bottom: 0;
        }

        .message-bubble code {
            background: rgba(76, 140, 245, 0.15);
            color: var(--accent-blue);
            padding: 2px 6px;
            border-radius: 4px;
            font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
            font-size: 0.9em;
        }

        .message-bubble pre {
            background: rgba(0, 0, 0, 0.3);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 8px;
            padding: 12px;
            overflow-x: auto;
            margin: 0.8em 0;
        }

        /* 第一个代码块移除上边距，最后一个代码块移除下边距 */
        .message-bubble pre:first-child {
            margin-top: 0;
        }

        .message-bubble pre:last-child {
            margin-bottom: 0;
        }

        .message-bubble pre code {
            background: none;
            padding: 0;
        }

        .message-bubble blockquote {
            border-left: 3px solid var(--accent-blue);
            padding-left: 12px;
            margin: 0.8em 0;
            color: var(--text-secondary);
            font-style: italic;
        }

        /* 第一个引用移除上边距，最后一个引用移除下边距 */
        .message-bubble blockquote:first-child {
            margin-top: 0;
        }

        .message-bubble blockquote:last-child {
            margin-bottom: 0;
        }

        .message-bubble a {
            color: var(--accent-blue);
            text-decoration: none;
            transition: var(--transition-fast);
        }

        .message-bubble a:hover {
            text-decoration: underline;
        }

        .message-bubble hr {
            border: none;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            margin: 1em 0;
        }

        .message-bubble table {
            width: 100%;
            border-collapse: collapse;
            margin: 0.8em 0;
        }

        /* 第一个表格移除上边距，最后一个表格移除下边距 */
        .message-bubble table:first-child {
            margin-top: 0;
        }

        .message-bubble table:last-child {
            margin-bottom: 0;
        }

        .message-bubble th, .message-bubble td {
            border: 1px solid rgba(255, 255, 255, 0.1);
            padding: 6px 10px;
            text-align: left;
        }

        .message-bubble th {
            background: rgba(0, 0, 0, 0.2);
            font-weight: 600;
        }

        .message-bubble img {
            max-width: 100%;
            height: auto;
            border-radius: 8px;
            margin: 0.8em 0;
        }

        /* 第一个图片移除上边距，最后一个图片移除下边距 */
        .message-bubble img:first-child {
            margin-top: 0;
        }

        .message-bubble img:last-child {
            margin-bottom: 0;
        }

        .message-bubble strong {
            font-weight: 600;
            color: var(--text-accent);
        }

        .message-bubble em {
            font-style: italic;
        }

        /* 确保所有内容都在气泡内 */
        .message-bubble > *:first-child {
            margin-top: 0 !important;
        }

        .message-bubble > *:last-child {
            margin-bottom: 0 !important;
        }

        .message-user .message-bubble {
            background: linear-gradient(135deg, rgba(76, 140, 245, 0.15) 0%, rgba(90, 156, 247, 0.2) 100%);
            border: 1px solid rgba(76, 140, 245, 0.3);
            color: var(--text-primary);
            border-radius: 18px 18px 4px 18px;
        }

        .message-ai .message-bubble {
            background: rgba(28, 28, 28, 0.8);
            border: 1px solid rgba(255, 255, 255, 0.08);
            color: var(--text-primary);
            border-radius: 18px 18px 18px 4px;
        }

        .message-time {
            font-size: 0.75rem;
            color: var(--text-muted);
            margin-top: 6px;
        }

        .message-user .message-time {
            text-align: right;
        }

        /* 打字指示器 */
        .typing-indicator {
            display: inline-flex;
            gap: 4px;
            padding: 8px 0;
        }

        .typing-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: var(--accent-blue);
            animation: typingBounce 1.4s infinite ease-in-out;
        }

        .typing-dot:nth-child(1) {
            animation-delay: 0s;
        }

        .typing-dot:nth-child(2) {
            animation-delay: 0.2s;
        }

        .typing-dot:nth-child(3) {
            animation-delay: 0.4s;
        }

        @keyframes typingBounce {
            0%, 60%, 100% {
                opacity: 0.3;
                transform: translateY(0);
            }
            30% {
                opacity: 1;
                transform: translateY(-6px);
            }
        }

        /* 步骤进度展示样式 - 横向布局 - 优化版 */
        .progress-steps {
            display: flex;
            flex-direction: row;
            gap: 40px;
            margin-top: 20px;
            overflow-x: auto;
            padding: 4px 0;
            position: relative;
        }

        .progress-step {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 8px;
            padding: 12px 8px;
            background: transparent;
            border-bottom: none;
            border-radius: 0;
            position: relative;
            opacity: 0.4;
            transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
            flex: 1;
            text-align: center;
        }
        
        /* 地铁式连接线 - 在两个节点的间隙中间 */
        .progress-step:not(:last-child)::after {
            content: '';
            position: absolute;
            left: calc(100% + 8px);
            top: 22px;
            width: calc(40px - 16px);
            height: 2px;
            background: rgba(255, 255, 255, 0.1);
            z-index: 0;
        }
        
        /* 已完成步骤隐藏灰色连接线 */
        .progress-step.completed:not(:last-child)::after {
            display: none;
        }
        
        /* 地铁流动点容器 - 在两个节点的间隙中间 */
        .progress-step:not(:last-child) .step-connector {
            position: absolute;
            left: calc(100% + 8px);
            top: 21px;
            width: calc(40px - 16px);
            height: 4px;
            z-index: 1;
            display: none;
        }
        
        /* 当前步骤激活时显示蓝色流动点 */
        .progress-step.active:not(:last-child) .step-connector {
            display: block;
        }
        
        /* 已完成步骤显示绿色流动点 */
        .progress-step.completed:not(:last-child) .step-connector {
            display: block;
        }
        
        /* 三个流动的点 */
        .step-connector-dot {
            position: absolute;
            width: 4px;
            height: 4px;
            border-radius: 50%;
            background: var(--accent-blue);
            box-shadow: 0 0 6px rgba(76, 140, 245, 0.8);
            animation: flowDot 1.5s ease-in-out infinite;
        }
        
        /* 已完成步骤的流动点变绿 */
        .progress-step.completed .step-connector-dot {
            background: var(--accent-green);
            box-shadow: 0 0 6px rgba(34, 197, 94, 0.8);
        }
        
        .step-connector-dot:nth-child(1) {
            animation-delay: 0s;
        }
        
        .step-connector-dot:nth-child(2) {
            animation-delay: 0.5s;
        }
        
        .step-connector-dot:nth-child(3) {
            animation-delay: 1s;
        }
        
        @keyframes flowDot {
            0% {
                left: 0;
                opacity: 0;
                transform: scale(0.5);
            }
            20% {
                opacity: 1;
                transform: scale(1);
            }
            80% {
                opacity: 1;
                transform: scale(1);
            }
            100% {
                left: 100%;
                opacity: 0;
                transform: scale(0.5);
            }
        }
        

        /* 当前活跃步骤 */
        .progress-step.active {
            opacity: 1;
            background: transparent;
        }

        /* 已完成步骤 - 绿色标识 */
        .progress-step.completed {
            opacity: 0.7;
            background: transparent;
        }

        /* 步骤图标 - 缩小尺寸 */
        .step-icon {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background: rgba(36, 36, 36, 0.6);
            border: 2px solid rgba(255, 255, 255, 0.06);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
            color: var(--text-muted);
            flex-shrink: 0;
            position: relative;
            transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .progress-step.active .step-icon {
            border-color: var(--accent-blue);
            color: var(--accent-blue);
            background: rgba(76, 140, 245, 0.12);
            animation: iconPulse 2s ease-in-out infinite;
        }

        @keyframes iconPulse {
            0%, 100% {
                transform: scale(1);
                box-shadow: 0 0 12px rgba(76, 140, 245, 0.2);
            }
            50% {
                transform: scale(1.08);
                box-shadow: 0 0 20px rgba(76, 140, 245, 0.4);
            }
        }

        .progress-step.completed .step-icon {
            border-color: var(--accent-green);
            color: var(--accent-green);
            background: rgba(34, 197, 94, 0.12);
            box-shadow: 0 0 12px rgba(34, 197, 94, 0.2);
        }

        /* 步骤加载动画 - 柔和旋转 */
        .step-spinner {
            position: absolute;
            width: 44px;
            height: 44px;
            border: 2.5px solid transparent;
            border-top-color: var(--accent-blue);
            border-right-color: var(--accent-blue);
            border-radius: 50%;
            animation: stepSpinSmooth 1.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
            opacity: 0;
            transition: opacity 0.4s ease;
        }

        .progress-step.active .step-spinner {
            opacity: 0.7;
        }

        @keyframes stepSpinSmooth {
            0% { 
                transform: rotate(0deg);
                border-top-color: var(--accent-blue);
                border-right-color: transparent;
            }
            50% {
                border-top-color: var(--accent-cyan);
                border-right-color: var(--accent-blue);
            }
            100% { 
                transform: rotate(360deg);
                border-top-color: var(--accent-blue);
                border-right-color: transparent;
            }
        }

        /* 步骤内容 */
        .step-content {
            width: 100%;
        }

        .step-title {
            font-size: 0.8rem;
            font-weight: 600;
            color: var(--text-secondary);
            margin-bottom: 4px;
            transition: all 0.4s ease;
            letter-spacing: 0.2px;
        }

        .progress-step.active .step-title {
            color: var(--text-primary);
            text-shadow: 0 0 8px rgba(76, 140, 245, 0.2);
        }

        .progress-step.completed .step-title {
            color: var(--accent-green);
        }

        .step-description {
            font-size: 0.75rem;
            color: var(--text-muted);
            line-height: 1.3;
            display: none;
        }

        .progress-step.active .step-description {
            color: var(--text-secondary);
            display: block;
        }

        /* 步骤状态图标 - 隐藏不显示 */
        .step-status {
            display: none;
        }

        /* 响应式调整 */
        @media (max-width: 768px) {
            .quick-questions-grid {
                grid-template-columns: 1fr;
            }

            .message-content {
                max-width: 85%;
            }

            .ready-prompt {
                padding: 30px 20px;
            }
            
            .progress-steps {
                flex-wrap: nowrap;
                overflow-x: auto;
            }
            
            .progress-step {
                padding: 16px 12px;
                gap: 10px;
                min-width: 120px;
            }
            
            .step-icon {
                width: 36px;
                height: 36px;
                font-size: 14px;
            }
            
            .step-spinner {
                width: 44px;
                height: 44px;
            }
            
            .step-title {
                font-size: 0.85rem;
            }
            
            .step-description {
                font-size: 0.75rem;
            }
        }

        /* ========== 全局侧边栏样式 ========== */
        
        .global-sidebar {
            position: fixed;
            left: 0;
            top: 0;
            width: 280px;
            height: 100vh;
            background: linear-gradient(180deg, rgba(15, 15, 15, 0.98) 0%, rgba(20, 20, 20, 0.98) 100%);
            backdrop-filter: blur(20px);
            border-right: 1px solid var(--border-primary);
            z-index: 999;
            transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            display: flex;
            flex-direction: column;
        }
        
        .global-sidebar.collapsed {
            transform: translateX(-280px);
        }
        
        .sidebar-toggle {
            position: absolute;
            right: -45px;
            top: 20px;
            width: 40px;
            height: 40px;
            background: rgba(28, 28, 28, 0.95);
            border: 1px solid var(--border-primary);
            border-radius: 0 12px 12px 0;
            color: var(--text-secondary);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: var(--transition);
            z-index: 1000;
        }
        
        .sidebar-toggle:hover {
            background: rgba(36, 36, 36, 0.95);
            color: var(--accent-blue);
            box-shadow: 0 4px 16px rgba(76, 140, 245, 0.2);
        }
        
        .sidebar-content {
            flex: 1;
            overflow-y: auto;
            padding: 24px 16px;
            scrollbar-width: none;
            -ms-overflow-style: none;
        }
        
        .sidebar-content::-webkit-scrollbar {
            display: none;
        }
        
        .sidebar-logo {
            text-align: center;
            margin-bottom: 32px;
            padding: 16px 0;
            border-bottom: 1px solid var(--border-primary);
        }
        
        .sidebar-logo img {
            max-width: 160px;
            height: auto;
            filter: drop-shadow(0 4px 12px rgba(76, 140, 245, 0.2));
        }
        
        .sidebar-nav {
            display: flex;
            flex-direction: column;
            gap: 4px;
        }
        
        .nav-item {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 14px 16px;
            color: var(--text-secondary);
            text-decoration: none;
            border-radius: 12px;
            transition: var(--transition);
            font-size: 0.95rem;
            font-weight: 500;
            position: relative;
        }
        
        .nav-item i {
            font-size: 18px;
            width: 24px;
            text-align: center;
            flex-shrink: 0;
        }
        
        .nav-item span:not(.nav-badge) {
            flex: 1;
        }
        
        .nav-item:hover:not(.disabled) {
            background: rgba(76, 140, 245, 0.1);
            color: var(--accent-blue);
            transform: translateX(4px);
        }
        
        .nav-item.active {
            background: linear-gradient(135deg, rgba(76, 140, 245, 0.15) 0%, rgba(90, 156, 247, 0.15) 100%);
            color: var(--accent-blue);
            box-shadow: 0 4px 12px rgba(76, 140, 245, 0.15);
        }
        
        .nav-item.disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }
        
        .nav-badge {
            padding: 2px 8px;
            border-radius: 8px;
            font-size: 0.65rem;
            font-weight: 600;
            letter-spacing: 0.5px;
            background: rgba(76, 140, 245, 0.2);
            color: var(--accent-blue);
        }
        
        .nav-badge.soon {
            background: rgba(251, 146, 60, 0.2);
            color: var(--accent-orange);
        }
        
        /* 首页新布局样式 */
        
        .landing-page-new {
            margin-left: 280px;
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 40px;
            transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }
        
        .global-sidebar.collapsed ~ .landing-page-new {
            margin-left: 0;
        }
        
        .home-container {
            max-width: 900px;
            width: 100%;
        }
        
        .welcome-section {
            text-align: center;
            margin-bottom: 48px;
        }
        
        .welcome-title {
            font-size: 2.5rem;
            font-weight: 800;
            background: linear-gradient(135deg, #ffffff 0%, #4c8cf5 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            margin-bottom: 16px;
            line-height: 1.3;
            filter: drop-shadow(0 0 30px rgba(76, 140, 245, 0.2));
        }
        
        .welcome-subtitle {
            font-size: 1.1rem;
            color: var(--text-secondary);
            line-height: 1.6;
        }
        
        .home-chat-container {
            background: transparent;
            backdrop-filter: none;
            border: 2px solid rgba(76, 140, 245, 0.2);
            border-radius: var(--border-radius-lg);
            padding: 32px;
            box-shadow: none;
            margin-bottom: 32px;
            animation: breatheBorder 4s ease-in-out infinite;
        }
        
        @keyframes breatheBorder {
            0%, 100% {
                border-color: rgba(76, 140, 245, 0.2);
                box-shadow: 0 0 20px rgba(76, 140, 245, 0.1);
            }
            50% {
                border-color: rgba(76, 140, 245, 0.4);
                box-shadow: 0 0 40px rgba(76, 140, 245, 0.2);
            }
        }
        
        .home-messages {
            min-height: 400px;
            max-height: 600px;
            overflow-y: auto;
            margin-bottom: 24px;
            scrollbar-width: none;
            -ms-overflow-style: none;
        }
        
        .home-messages::-webkit-scrollbar {
            display: none;
        }
        
        .home-messages::-webkit-scrollbar {
            width: 6px;
        }
        
        .home-messages::-webkit-scrollbar-track {
            background: transparent;
        }
        
        .home-messages::-webkit-scrollbar-thumb {
            background: rgba(76, 140, 245, 0.3);
            border-radius: 3px;
        }
        
        .home-welcome-message {
            text-align: center;
            padding: 40px 20px;
        }
        
        .welcome-icon {
            width: 80px;
            height: 80px;
            margin: 0 auto 24px;
            background: linear-gradient(135deg, rgba(76, 140, 245, 0.2) 0%, rgba(6, 182, 212, 0.2) 100%);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 40px;
            color: var(--accent-blue);
            box-shadow: 0 8px 24px rgba(76, 140, 245, 0.3);
        }
        
        .home-welcome-message h3 {
            font-size: 1.5rem;
            color: var(--text-primary);
            margin-bottom: 12px;
        }
        
        .home-welcome-message p {
            font-size: 1rem;
            color: var(--text-secondary);
            margin-bottom: 32px;
        }
        
        .quick-examples {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 12px;
            max-width: 600px;
            margin: 0 auto;
        }
        
        .example-btn {
            background: rgba(28, 28, 28, 0.6);
            border: 1px solid rgba(76, 140, 245, 0.2);
            color: var(--text-secondary);
            padding: 12px 16px;
            border-radius: 12px;
            cursor: pointer;
            transition: var(--transition);
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 0.9rem;
            font-family: inherit;
        }
        
        .example-btn i {
            color: var(--accent-blue);
            font-size: 16px;
        }
        
        .example-btn:hover {
            background: rgba(76, 140, 245, 0.1);
            border-color: var(--accent-blue);
            color: var(--accent-blue);
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(76, 140, 245, 0.2);
        }
        
        .home-input-area {
            display: flex;
            gap: 12px;
            align-items: end;
        }
        
        .home-textarea {
            flex: 1;
            padding: 16px 20px;
            background: rgba(26, 26, 26, 0.6);
            border: 1px solid rgba(76, 140, 245, 0.15);
            border-radius: 16px;
            color: var(--text-primary);
            font-size: 15px;
            font-family: inherit;
            resize: none;
            transition: var(--transition);
            min-height: 56px;
            max-height: 150px;
        }
        
        .home-textarea:focus {
            outline: none;
            background: rgba(28, 28, 28, 0.8);
            border-color: rgba(76, 140, 245, 0.4);
            box-shadow: 0 0 0 4px rgba(76, 140, 245, 0.08);
        }
        
        .home-textarea::placeholder {
            color: var(--text-muted);
        }
        
        .home-send-btn {
            padding: 16px 32px;
            background: linear-gradient(135deg, rgba(20, 20, 20, 0.95) 0%, rgba(30, 30, 30, 0.95) 100%);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 16px;
            color: white;
            font-size: 15px;
            font-weight: 600;
            cursor: pointer;
            transition: var(--transition);
            display: flex;
            align-items: center;
            gap: 8px;
            font-family: inherit;
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
            min-height: 56px;
        }
        
        .home-send-btn:hover {
            transform: translateY(-2px);
            background: linear-gradient(135deg, rgba(30, 30, 30, 0.95) 0%, rgba(40, 40, 40, 0.95) 100%);
            border-color: rgba(255, 255, 255, 0.2);
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
        }
        
        .home-features-hint {
            text-align: center;
            padding: 20px;
            background: rgba(76, 140, 245, 0.05);
            border: 1px solid rgba(76, 140, 245, 0.15);
            border-radius: 12px;
        }
        
        .home-features-hint p {
            margin: 0;
            color: var(--text-secondary);
            font-size: 0.9rem;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }
        
        .home-features-hint i {
            color: var(--accent-blue);
        }
        
        /* 响应式 - 侧边栏和首页 */
        @media (max-width: 1024px) {
            .global-sidebar {
                transform: translateX(-280px);
            }
            
            .global-sidebar.show {
                transform: translateX(0);
            }
            
            .landing-page-new {
                margin-left: 0;
            }
            
            .quick-examples {
                grid-template-columns: 1fr;
            }
        }
        
        @media (max-width: 768px) {
            .welcome-title {
                font-size: 1.8rem;
            }
            
            .home-input-area {
                flex-direction: column;
            }
            
            .home-send-btn {
                width: 100%;
                justify-content: center;
            }
        }

        /* ========== AI视频搜索Agent专用样式 ========== */
        
        /* 视频卡片样式 */
        .video-card {
            background: rgba(28, 28, 28, 0.8);
            border: 1px solid var(--border-primary);
            border-radius: var(--border-radius);
            padding: 16px;
            margin: 12px 0;
            display: flex;
            gap: 16px;
            transition: var(--transition);
        }

        .video-card:hover {
            border-color: var(--accent-blue);
            transform: translateX(4px);
            box-shadow: 0 4px 16px rgba(76, 140, 245, 0.2);
        }

        .video-thumbnail {
            width: 160px;
            height: 90px;
            border-radius: 8px;
            object-fit: cover;
            flex-shrink: 0;
        }

        .video-info-compact {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        .video-card-title {
            font-size: 1rem;
            font-weight: 600;
            color: var(--text-primary);
            margin-bottom: 8px;
            line-height: 1.4;
        }

        .video-meta-compact {
            display: flex;
            gap: 16px;
            font-size: 0.85rem;
            color: var(--text-muted);
            margin-bottom: 12px;
        }

        .video-meta-compact span {
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .video-card-actions {
            display: flex;
            gap: 8px;
        }

        .btn-select-video {
            background: var(--gradient-accent);
            color: white;
            border: none;
            padding: 8px 16px;
            border-radius: 8px;
            cursor: pointer;
            font-size: 0.9rem;
            font-weight: 600;
            transition: var(--transition);
            display: inline-flex;
            align-items: center;
            gap: 6px;
            font-family: inherit;
        }

        .btn-select-video:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(76, 140, 245, 0.3);
        }

        .btn-select-video:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }

        /* 内联进度显示 */
        .inline-progress {
            background: rgba(36, 36, 36, 0.6);
            border-radius: 12px;
            padding: 16px;
            margin: 12px 0;
        }

        .inline-progress-bar {
            width: 100%;
            height: 8px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 8px;
            overflow: hidden;
            margin: 8px 0;
        }

        .inline-progress-fill {
            height: 100%;
            background: var(--gradient-accent);
            transition: width 0.3s ease;
        }

        .inline-progress-text {
            font-size: 0.9rem;
            color: var(--text-secondary);
            margin-bottom: 4px;
        }

        .inline-progress-percent {
            font-size: 0.85rem;
            color: var(--accent-blue);
            font-weight: 600;
            text-align: right;
            margin-top: 4px;
        }

        /* 笔记结果卡片 */
        .notes-result-card {
            background: rgba(28, 28, 28, 0.9);
            border: 1px solid rgba(34, 197, 94, 0.3);
            border-radius: var(--border-radius);
            padding: 20px;
            margin: 12px 0;
        }

        .notes-result-card h3 {
            font-size: 1.1rem;
            color: var(--accent-green);
            margin-bottom: 12px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .notes-preview {
            max-height: 200px;
            overflow-y: auto;
            margin: 12px 0;
            padding: 12px;
            background: rgba(0, 0, 0, 0.3);
            border-radius: 8px;
            font-size: 0.9rem;
            line-height: 1.6;
            color: var(--text-secondary);
        }

        .download-buttons-inline {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
            margin-top: 12px;
        }

        /* 错误消息样式 */
        .message-error {
            color: var(--accent-red);
            background: rgba(248, 113, 113, 0.1);
            padding: 12px;
            border-radius: 8px;
            border-left: 3px solid var(--accent-red);
        }

        /* 响应式 - 搜索Agent */
        @media (max-width: 768px) {
            .video-card {
                flex-direction: column;
            }
            
            .video-thumbnail {
                width: 100%;
                height: auto;
            }
            
            .download-buttons-inline {
                flex-direction: column;
            }
            
            .download-buttons-inline .btn {
                width: 100%;
            }
        }
    </style>
</head>
<body>
    <!-- 右上角工具栏 - 联系作者 + 语言切换 -->
    <div class="top-right-toolbar">
        <!-- 联系作者按钮 - 左侧 -->
        <div class="contact-author-compact">
            <button class="contact-btn-compact" onclick="toggleContactCard()">
                <img src="/static/zlab.png" alt="联系作者">
            </button>
        </div>
        <div class="contact-card" id="contactCard">
            <div class="contact-header">
                <i class="fas fa-comment-dots"></i>
                <h4>联系作者</h4>
            </div>
            <div class="contact-item">
                <div class="contact-label">
                    <i class="fab fa-weixin"></i>
                    <span>微信</span>
                </div>
                <img src="/static/vx.jpg" alt="微信二维码" class="wechat-qr">
            </div>
            <div class="contact-item">
                <div class="contact-label">
                    <i class="fas fa-envelope"></i>
                    <span>邮箱</span>
                </div>
                <a href="mailto:864410260@qq.com" class="contact-email">864410260@qq.com</a>
            </div>
        </div>
        
        <!-- 语言切换按钮 - 右侧 -->
        <button class="lang-toggle-btn" onclick="toggleLanguage()">
            <i class="fas fa-globe"></i>
            <span id="langText">中文</span>
        </button>
    </div>

    <!-- 全局侧边栏导航 -->
    <div id="globalSidebar" class="global-sidebar">
        <button class="sidebar-toggle" id="sidebarToggle" onclick="toggleSidebar()">
            <i class="fas fa-bars"></i>
        </button>
        
        <div class="sidebar-content">
            <!-- Logo -->
            <div class="sidebar-logo">
                <img src="/static/product-logo.png" alt="ViNote">
            </div>
            
            <!-- 导航菜单 -->
            <nav class="sidebar-nav">
                <a href="#" class="nav-item active" onclick="showHomePage(event)">
                    <i class="fas fa-home"></i>
                    <span data-zh="首页" data-en="Home">首页</span>
                </a>
                <a href="#" class="nav-item" onclick="enterWorkspace('notes', event)">
                    <i class="fas fa-magic"></i>
                    <span data-zh="AI视频笔记" data-en="AI Notes">AI视频笔记</span>
                    <span class="nav-badge">NEW</span>
                </a>
                <a href="#" class="nav-item" onclick="enterWorkspace('qa', event)">
                    <i class="fas fa-comments"></i>
                    <span data-zh="AI视频问答" data-en="Video Q&A">AI视频问答</span>
                    <span class="nav-badge">NEW</span>
                </a>
                <a href="#" class="nav-item" onclick="enterWorkspace('search-agent', event)">
                    <i class="fas fa-search"></i>
                    <span data-zh="ViNoter超级智搜" data-en="ViNoter Super Search">ViNoter超级智搜</span>
                    <span class="nav-badge">HOT</span>
                </a>
                <a href="#" class="nav-item" onclick="enterWorkspace('dev-tools', event)">
                    <i class="fas fa-tools"></i>
                    <span data-zh="开发者工具" data-en="Dev Tools">开发者工具</span>
                    <span class="nav-badge">NEW</span>
                </a>
                <a href="#" class="nav-item disabled">
                    <i class="fas fa-pen-fancy"></i>
                    <span data-zh="一键创作发布" data-en="Publishing">一键创作发布</span>
                    <span class="nav-badge soon">SOON</span>
                </a>
                <a href="#" class="nav-item disabled">
                    <i class="fas fa-closed-captioning"></i>
                    <span data-zh="实时字幕下载" data-en="Subtitles">实时字幕下载</span>
                    <span class="nav-badge soon">SOON</span>
                </a>
                <a href="#" class="nav-item disabled">
                    <i class="fas fa-layer-group"></i>
                    <span data-zh="知识卡片生成" data-en="Cards">知识卡片生成</span>
                    <span class="nav-badge soon">SOON</span>
                </a>
                <a href="#" class="nav-item disabled">
                    <i class="fas fa-project-diagram"></i>
                    <span data-zh="思维导图生成" data-en="Mind Map">思维导图生成</span>
                    <span class="nav-badge soon">SOON</span>
                </a>
            </nav>
        </div>
    </div>

    <!-- 首页视图 - 全局对话界面 -->
    <div id="landingPage" class="landing-page-new">
        <div class="home-container">
            <!-- 欢迎区域 -->
            <div class="welcome-section">
                <h1 class="welcome-title">
                    <span data-zh="视记AI · 让每一个视频都成为知识宝藏" data-en="ViNote AI · Transform Every Video into Knowledge Treasure">
                        视记AI · 让每一个视频都成为知识宝藏
                    </span>
                </h1>
                <p class="welcome-subtitle">
                    <span data-zh="智能搜索视频，自动生成笔记，开启高效学习之旅" data-en="Smart search, auto notes, start efficient learning">
                        智能搜索视频，自动生成笔记，开启高效学习之旅
                    </span>
                </p>
            </div>
            
            <!-- 全局对话框 -->
            <div class="home-chat-container">
                <!-- 消息显示区 -->
                <div class="home-messages" id="homeMessages">
                    <!-- 初始欢迎消息 -->
                    <div class="home-welcome-message">
                        <div class="welcome-icon">
                            <i class="fas fa-robot"></i>
                        </div>
                        <h3 data-zh="ViNoter · 超级视记Agent ✨" data-en="ViNoter · Super ViNote Agent ✨">ViNoter · 超级视记Agent ✨</h3>
                        <p data-zh="搜索全网优质视频，自动生成笔记和摘要，与视频内容智能对话" data-en="Search videos, auto notes & smart chat">
                            搜索全网优质视频，自动生成笔记和摘要，与视频内容智能对话
                        </p>
                        
                        <!-- 快捷示例 -->
                        <div class="quick-examples">
                            <button class="example-btn" onclick="fillHomeInput('在B站搜索Python编程')">
                                <i class="fab fa-bilibili"></i>
                                <span>在B站搜索Python编程</span>
                            </button>
                            <button class="example-btn" onclick="fillHomeInput('在YouTube搜索机器学习')">
                                <i class="fab fa-youtube"></i>
                                <span>在YouTube搜索机器学习</span>
                            </button>
                            <button class="example-btn" onclick="fillHomeInput('我想学习英语口语')">
                                <i class="fas fa-graduation-cap"></i>
                                <span>我想学习英语口语</span>
                            </button>
                            <button class="example-btn" onclick="fillHomeInput('帮我查询优秀公开课')">
                                <i class="fas fa-chalkboard-teacher"></i>
                                <span>帮我查询优秀公开课</span>
                            </button>
                        </div>
                    </div>
                </div>
                
                <!-- 输入区 -->
                <div class="home-input-area">
                    <textarea 
                        id="homeInput" 
                        class="home-textarea"
                        placeholder="输入你想学习的内容，例如: 我想学习Python编程..."
                        data-zh-placeholder="输入你想学习的内容，例如: 我想学习Python编程..."
                        data-en-placeholder="Enter what you want to learn, e.g.: I want to learn Python..."
                        rows="1"
                    ></textarea>
                    <button class="home-send-btn" id="homeSendBtn" onclick="handleHomeSearch()">
                        <i class="fas fa-paper-plane"></i>
                        <span data-zh="搜索" data-en="Search">搜索</span>
                    </button>
                </div>
            </div>
            
        </div>
    </div>

    <!-- 旧版首页（备用）-->
    <div id="oldLandingPage" class="landing-page" style="display: none;">
        <div class="features-showcase-fullscreen">
            <!-- 产品名称和标识 - 重新设计大气版 -->
            <div style="margin-bottom: 120px; text-align: center; margin-top: -40px;">
                <!-- 产品名称 - 更大更突出，带动态光晕 -->
                <div style="margin-bottom: 32px; position: relative; display: inline-block;">
                    <!-- 光晕效果层 - 更分散柔和 -->
                    <div style="position: absolute; inset: -50px; background: radial-gradient(circle, rgba(76, 140, 245, 0.15) 0%, rgba(6, 182, 212, 0.08) 30%, transparent 60%); border-radius: 50%; z-index: -1; animation: pulse 2s ease-in-out infinite; filter: blur(30px);"></div>
                    <div style="position: absolute; inset: -35px; background: radial-gradient(circle, rgba(76, 140, 245, 0.12) 0%, rgba(6, 182, 212, 0.06) 40%, transparent 65%); border-radius: 50%; z-index: -1; animation: pulse 2s ease-in-out infinite 0.5s; filter: blur(25px);"></div>
                    
                    <img src="/static/product-logo.png" alt="ViNote" style="max-width: 300px; max-height: 120px; width: auto; height: auto; display: block; margin: 0 auto; filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.4)) drop-shadow(0 4px 8px rgba(76, 140, 245, 0.4)) drop-shadow(0 0 40px rgba(76, 140, 245, 0.3)) drop-shadow(0 0 80px rgba(6, 182, 212, 0.2)); object-fit: contain; transform: perspective(1000px) rotateX(5deg); transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);">
                </div>
                
                <!-- 副标题 - 原来的中文标语样式 -->
                <p style="font-size: 1.2rem; color: var(--text-secondary); margin-bottom: 32px; line-height: 1.8;" data-zh="视记AI · 让每一个视频都成为知识宝藏" data-en="ViNote AI · Transform Every Video into Knowledge Treasure">
                    视记AI · 让每一个视频都成为知识宝藏
                </p>
                
                <!-- 渐变分割线 - 从中间向两边渐进变淡，加长 -->
                <div style="width: 120%; height: 2px; background: linear-gradient(90deg, transparent 0%, rgba(76, 140, 245, 0.2) 20%, rgba(76, 140, 245, 0.6) 50%, rgba(76, 140, 245, 0.2) 80%, transparent 100%); box-shadow: 0 0 8px rgba(76, 140, 245, 0.3); margin-left: -10%; margin-right: -10%;"></div>
            </div>
            
            <div class="features-grid">
                <div class="feature-card feature-card-ready" onclick="enterWorkspace('notes')" style="cursor: pointer;">
                    <div class="feature-icon">
                        <div class="feature-status" data-zh="NEW" data-en="NEW">NEW</div>
                        <i class="fas fa-magic"></i>
                    </div>
                    <div class="feature-title" data-zh="AI视频笔记" data-en="AI Smart Notes">AI视频笔记</div>
                    <div class="feature-description" data-zh="一键生成笔记、摘要、翻译、原始转录" data-en="One-click notes, summary & translation">
                        一键生成笔记、摘要、翻译、原始转录
                    </div>
                </div>
                
                <div class="feature-card feature-card-ready" onclick="enterWorkspace('qa')" style="cursor: pointer;">
                    <div class="feature-icon">
                        <div class="feature-status" data-zh="NEW" data-en="NEW">NEW</div>
                        <i class="fas fa-comments"></i>
                    </div>
                    <div class="feature-title" data-zh="AI视频问答" data-en="Video Q&A">AI视频问答</div>
                    <div class="feature-description" data-zh="与视频对话，秒懂核心内容" data-en="Chat with video, instant understanding">
                        与视频对话，秒懂核心内容
                    </div>
                </div>
                
                <div class="feature-card feature-card-ready" onclick="enterWorkspace('search-agent')" style="cursor: pointer;">
                    <div class="feature-icon">
                        <div class="feature-status" data-zh="NEW" data-en="NEW">NEW</div>
                        <i class="fas fa-search"></i>
                    </div>
                    <div class="feature-title" data-zh="AI视频搜索" data-en="AI Video Search">AI视频搜索</div>
                    <div class="feature-description" data-zh="智能搜索视频，自动生成笔记" data-en="Smart search & auto notes">
                        智能搜索视频，自动生成笔记
                    </div>
                </div>
                
                <div class="feature-card feature-card-pending" onclick="enterWorkspace('publish')" style="cursor: pointer;">
                      <div class="feature-icon">
                        <div class="feature-status feature-status-pending" data-zh="SOON" data-en="SOON">SOON</div>
                        <i class="fas fa-pen-fancy"></i>
                    </div>
                    <div class="feature-title" data-zh="一键创作发布" data-en="One-Click Publishing">一键创作发布</div>
                    <div class="feature-description" data-zh="视频变文章，多平台一键发布" data-en="Video to article, one-click publishing">
                        视频变文章，多平台一键发布
                    </div>
                </div>
                
                <div class="feature-card feature-card-pending" onclick="enterWorkspace('subtitle')" style="cursor: pointer;">
                    <div class="feature-icon">
                        <div class="feature-status feature-status-pending" data-zh="SOON" data-en="SOON">SOON</div>
                        <i class="fas fa-closed-captioning"></i>
                    </div>
                    <div class="feature-title" data-zh="实时字幕下载" data-en="Live Subtitle Download">实时字幕下载</div>
                    <div class="feature-description" data-zh="提取字幕，支持主流格式" data-en="Extract subtitles, mainstream formats">
                        提取字幕，支持主流格式
                    </div>
                </div>
                
                <div class="feature-card feature-card-pending" onclick="enterWorkspace('flashcard')" style="cursor: pointer;">
                    <div class="feature-icon">
                        <div class="feature-status feature-status-pending" data-zh="SOON" data-en="SOON">SOON</div>
                        <i class="fas fa-layer-group"></i>
                    </div>
                    <div class="feature-title" data-zh="知识卡片生成" data-en="Study Cards">知识卡片生成</div>
                    <div class="feature-description" data-zh="生成学习卡片，高效记忆知识" data-en="Generate study cards, efficient learning">
                        生成学习卡片，高效记忆知识
                    </div>
                </div>
                
                <div class="feature-card feature-card-pending" onclick="enterWorkspace('mindmap')" style="cursor: pointer;">
                    <div class="feature-icon">
                        <div class="feature-status feature-status-pending" data-zh="SOON" data-en="SOON">SOON</div>
                        <i class="fas fa-project-diagram"></i>
                    </div>
                    <div class="feature-title" data-zh="思维导图生成" data-en="Mind Map">思维导图生成</div>
                    <div class="feature-description" data-zh="自动生成思维导图，构建知识体系" data-en="Auto mind map, build knowledge system">
                        自动生成思维导图，构建知识体系
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 视频智能问答工作页面 -->
    <div id="qaWorkspace" class="main-container" style="display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100vh; z-index: 10;">
        <!-- 左侧 - 视频预览和控制 -->
        <div class="left-panel">
            <!-- 返回首页按钮 -->
            <button class="back-to-home-btn" onclick="backToLanding()">
                <i class="fas fa-arrow-left"></i>
                <span data-zh="返回首页" data-en="Back to Home">返回首页</span>
            </button>

            <!-- 头部 -->
            <header class="header">
                <h1 data-zh="AI视频对话" data-en="AI Video Chat">AI视频对话</h1>
                <p data-zh="与AI畅聊视频内容" data-en="Chat with AI about video content">
                    与AI畅聊视频内容
                </p>
            </header>

            <!-- 输入模式切换 -->
            <div class="card">
                <div class="input-mode-toggle" style="display: flex; gap: 8px; margin-bottom: 20px; background: rgba(28, 28, 28, 0.6); padding: 6px; border-radius: 12px;">
                    <button type="button" class="mode-btn active" id="qaUrlModeBtn" onclick="switchQAInputMode('url')" style="flex: 1; padding: 10px 16px; border: none; background: rgba(255, 255, 255, 0.1); color: white; border-radius: 8px; cursor: pointer; transition: all 0.3s; font-family: inherit; font-size: 0.85rem; font-weight: 600;">
                        <i class="fas fa-link"></i>
                        <span data-zh="在线URL" data-en="Online URL">在线URL</span>
                    </button>
                    <button type="button" class="mode-btn" id="qaPathModeBtn" onclick="switchQAInputMode('path')" style="flex: 1; padding: 10px 16px; border: none; background: transparent; color: var(--text-secondary); border-radius: 8px; cursor: pointer; transition: all 0.3s; font-family: inherit; font-size: 0.85rem; font-weight: 600;">
                        <i class="fas fa-folder"></i>
                        <span data-zh="本地路径" data-en="Local Path">本地路径</span>
                    </button>
                </div>
            </div>

            <!-- URL视频输入 -->
            <div class="card" id="qaUrlInputSection">
                <div class="form-group">
                    <label for="qaVideoUrl" data-zh="视频链接" data-en="Video URL">视频链接</label>
                    <input 
                        type="url" 
                        id="qaVideoUrl" 
                        class="form-control" 
                        placeholder="请输入YouTube或B站视频链接..."
                        data-zh-placeholder="请输入YouTube或B站视频链接..."
                        data-en-placeholder="Enter YouTube or Bilibili video URL..."
                    >
                    <button type="button" id="qaPreviewBtn" class="btn btn-secondary btn-full" onclick="previewVideoForQA()" style="margin-top: 16px;">
                        <span class="btn-content">
                            <i class="fas fa-eye"></i>
                            <span data-zh="预览" data-en="Preview">预览</span>
                        </span>
                    </button>
                </div>
            </div>

            <!-- 本地路径输入 -->
            <div class="card" id="qaLocalPathSection" style="display: none;">
                <div class="form-group">
                    <label for="qaLocalVideoPath" data-zh="本地文件路径" data-en="Local File Path">本地文件路径</label>
                    <input 
                        type="text" 
                        id="qaLocalVideoPath" 
                        class="form-control" 
                        placeholder="请输入本地视频文件的绝对路径..."
                        data-zh-placeholder="请输入本地视频文件的绝对路径..."
                        data-en-placeholder="Enter local video file absolute path..."
                        style="font-family: 'Monaco', 'Menlo', monospace; font-size: 14px;"
                    >
                    <button type="button" id="qaLocalPreviewBtn" class="btn btn-secondary btn-full" onclick="previewLocalVideoForQA()" style="margin-top: 16px;">
                        <span class="btn-content">
                            <i class="fas fa-eye"></i>
                            <span data-zh="预览" data-en="Preview">预览</span>
                        </span>
                    </button>
                    <div style="background: rgba(76, 140, 245, 0.05); padding: 12px; border-radius: 8px; border-left: 3px solid var(--accent-blue); margin-top: 12px; font-size: 0.85rem;">
                        <p style="margin: 0 0 8px 0; font-weight: 600; color: var(--text-primary);">
                            <i class="fas fa-info-circle" style="color: var(--accent-blue);"></i>
                            <span data-zh="示例路径:" data-en="Example paths:">示例路径:</span>
                        </p>
                        <ul style="margin: 0; padding-left: 20px; color: var(--text-secondary); line-height: 1.6;">
                            <li><strong>Mac/Linux:</strong> /Users/zhangsan/Videos/lecture.mp4</li>
                            <li><strong>Windows:</strong> C:\Users\zhangsan\Videos\lecture.mp4</li>
                        </ul>
                    </div>
                </div>
            </div>

            <!-- 初始空状态 -->
            <div id="qaEmptyState" class="empty-state" style="min-height: 300px;">
                <i class="fas fa-video"></i>
                <p data-zh="暂无视频" data-en="No Video">暂无视频</p>
                <span class="hint" data-zh="请输入视频链接开始" data-en="Enter video URL to start">请输入视频链接开始</span>
            </div>

            <!-- 视频预览区 -->
            <div id="qaVideoPreview" class="video-preview" style="display: none;">
                <!-- 预处理按钮（带进度条）- 移到顶部 -->
                <button id="qaPreprocessBtn" class="btn btn-secondary btn-full btn-with-progress" onclick="preprocessVideo()" disabled style="margin-bottom: 20px; position: relative; overflow: hidden;">
                    <div class="btn-progress-bg" id="qaPreprocessBtnProgress" style="position: absolute; left: 0; top: 0; height: 100%; width: 0%; background: linear-gradient(90deg, rgba(76, 140, 245, 0.4) 0%, rgba(90, 156, 247, 0.6) 100%); transition: width 0.3s ease; z-index: 0;"></div>
                    <span class="btn-content" style="position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 8px;">
                        <i class="fas fa-cog"></i>
                        <span>开始预处理</span>
                        <span id="qaPreprocessPercent" style="margin-left: 8px; font-size: 0.9em; opacity: 0; transition: opacity 0.3s;">0%</span>
                    </span>
                </button>
                
                <h3 class="video-title" id="qaVideoTitle" style="font-size: 1.1rem; margin-bottom: 12px; color: var(--text-primary);"></h3>
                <div class="video-player" id="qaVideoPlayer"></div>
                <div class="video-info" style="margin-top: 16px;">
                    <div class="video-meta" id="qaVideoMeta"></div>
                </div>
            </div>
        </div>

        <!-- 右侧 - 对话区域 -->
        <div class="right-panel" style="padding: 0; background: var(--bg-secondary); display: grid; grid-template-rows: auto 1fr auto;">
            <!-- 对话头部 -->
            <div style="padding: 24px 32px; border-bottom: 1px solid var(--border-primary); background: var(--bg-primary);">
                <h2 style="font-size: 1.3rem; color: var(--text-primary); margin-bottom: 8px;">
                    <i class="fas fa-robot" style="color: var(--accent-cyan); margin-right: 10px;"></i>
                    <span data-zh="智能对话" data-en="Smart Chat">智能对话</span>
                </h2>
                <p style="font-size: 0.9rem; color: var(--text-secondary); margin: 0;">
                    <span data-zh="向AI提问，快速获取视频内容答案" data-en="Ask AI for quick answers">向AI提问，快速获取视频内容答案</span>
                </p>
            </div>

            <!-- 消息滚动区域 -->
            <div id="qaMessagesContainer" style="overflow-y: auto; padding: 24px 32px;">
                <!-- 初始欢迎消息 -->
                <div id="qaWelcomeMessage" style="text-align: center; padding: 60px 20px; color: var(--text-muted);">
                    <i class="fas fa-comments" style="font-size: 64px; opacity: 0.3; margin-bottom: 20px;"></i>
                    <p style="font-size: 1.1rem; margin-bottom: 8px;">暂无对话</p>
                    <p style="font-size: 0.9rem;">完成视频预处理后即可开始对话</p>
                </div>
                
                <!-- 对话消息容器 -->
                <div id="messagesContainer" style="display: none;">
                    <!-- 消息将动态添加到这里 -->
                </div>
            </div>

            <!-- 输入区域 - 固定在底部 -->
            <div style="padding: 20px 32px 24px; background: var(--bg-secondary); border-top: 1px solid var(--border-primary);">
                <div style="display: flex; gap: 12px; align-items: center;">
                    <textarea 
                        id="questionInput" 
                        class="form-control"
                        placeholder="输入您的问题..."
                        rows="3"
                        style="resize: none; border-radius: 12px; flex: 1; font-size: 15px; padding: 14px 18px; border: 1px solid rgba(76, 140, 245, 0.15); background: rgba(26, 26, 26, 0.6); transition: all 0.4s ease; box-shadow: 0 0 0 0 rgba(76, 140, 245, 0); animation: inputBreathe 3s ease-in-out infinite;"
                        disabled
                    ></textarea>
                    <style>
                        @keyframes inputBreathe {
                            0%, 100% {
                                border-color: rgba(76, 140, 245, 0.15);
                                box-shadow: 0 0 0 0 rgba(76, 140, 245, 0);
                            }
                            50% {
                                border-color: rgba(76, 140, 245, 0.25);
                                box-shadow: 0 0 12px rgba(76, 140, 245, 0.1);
                            }
                        }
                        #questionInput:focus {
                            border-color: rgba(76, 140, 245, 0.4) !important;
                            box-shadow: 0 0 16px rgba(76, 140, 245, 0.15) !important;
                            animation: none !important;
                        }
                    </style>
                    <div style="display: flex; gap: 8px; align-items: center;">
                        <button id="askBtn" class="btn btn-secondary" onclick="askQuestion()" disabled style="min-width: 70px; border-radius: 10px; padding: 10px 16px; white-space: nowrap; font-size: 13px; height: 40px;">
                            <i class="fas fa-paper-plane" style="font-size: 12px;"></i>
                            <span>发送</span>
                        </button>
                        <button class="btn btn-secondary btn-sm" onclick="clearQAConversation()" style="min-width: 70px; border-radius: 10px; padding: 10px 16px; white-space: nowrap; font-size: 13px; height: 40px;">
                            <i class="fas fa-trash" style="font-size: 12px;"></i>
                            <span>清空</span>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 工作界面视图（默认隐藏）-->
    <div id="workspacePage" class="main-container" style="display: none;">
        <!-- 左侧控制面板 -->
        <div class="left-panel">
            <!-- 返回首页按钮 -->
            <button class="back-to-home-btn" onclick="backToLanding()">
                <i class="fas fa-arrow-left"></i>
                <span data-zh="返回首页" data-en="Back to Home">返回首页</span>
            </button>

            <!-- 装饰性背景元素 -->
            <div class="decorative-elements">
                <div class="deco-circle deco-1"></div>
                <div class="deco-circle deco-2"></div>
                <div class="deco-line deco-3"></div>
                <div class="deco-line deco-4"></div>
            </div>

            <!-- 头部 -->
            <header class="header">
                <h1 data-zh="AI视频笔记" data-en="AI Video Notes">AI视频笔记</h1>
                <p data-zh="一键生成视频笔记、摘要和翻译" data-en="Generate notes, summaries and translations">
                    一键生成视频笔记、摘要和翻译
                </p>
            </header>

            <!-- 输入模式切换 -->
            <div class="card">
                <div class="input-mode-toggle" style="display: flex; gap: 8px; margin-bottom: 20px; background: rgba(28, 28, 28, 0.6); padding: 6px; border-radius: 12px;">
                    <button type="button" class="mode-btn active" id="urlModeBtn" onclick="switchInputMode('url')" style="flex: 1; padding: 10px 16px; border: none; background: rgba(255, 255, 255, 0.1); color: white; border-radius: 8px; cursor: pointer; transition: all 0.3s; font-family: inherit; font-size: 0.85rem; font-weight: 600;">
                        <i class="fas fa-link"></i>
                        <span data-zh="在线URL" data-en="Online URL">在线URL</span>
                    </button>
                    <button type="button" class="mode-btn" id="pathModeBtn" onclick="switchInputMode('path')" style="flex: 1; padding: 10px 16px; border: none; background: transparent; color: var(--text-secondary); border-radius: 8px; cursor: pointer; transition: all 0.3s; font-family: inherit; font-size: 0.85rem; font-weight: 600;">
                        <i class="fas fa-folder"></i>
                        <span data-zh="本地路径" data-en="Local Path">本地路径</span>
                    </button>
                </div>
            </div>

            <!-- URL输入区域 -->
            <div class="card" id="urlInputSection">
                <form id="videoForm">
                    <div class="form-group">
                        <label for="videoUrl" data-zh="视频链接" data-en="Video URL">视频链接</label>
                        <input 
                            type="url" 
                            id="videoUrl" 
                            class="form-control" 
                            placeholder="请输入YouTube或B站视频链接..."
                            data-zh-placeholder="请输入YouTube或B站视频链接..."
                            data-en-placeholder="Enter YouTube or Bilibili video URL..."
                        >
                        <button type="button" id="previewBtn" class="btn btn-secondary btn-full" onclick="previewVideo()" style="margin-top: 16px;">
                            <span class="btn-content">
                                <i class="fas fa-eye"></i>
                                <span data-zh="预览" data-en="Preview">预览</span>
                            </span>
                        </button>
                    </div>
                    
                    <div class="form-group">
                        <label for="summaryLanguage" data-zh="摘要语言" data-en="Summary Language">摘要语言</label>
                        <select id="summaryLanguage" class="form-control">
                            <option value="zh">中文</option>
                            <option value="en">English</option>
                            <option value="ja">日本語</option>
                            <option value="ko">한국어</option>
                            <option value="es">Español</option>
                            <option value="fr">Français</option>
                            <option value="de">Deutsch</option>
                            <option value="it">Italiano</option>
                            <option value="pt">Português</option>
                            <option value="ru">Русский</option>
                            <option value="ar">العربية</option>
                        </select>
                    </div>

                    <button type="button" id="transcribeBtn" class="btn btn-secondary btn-full btn-with-progress" onclick="startTranscription()" disabled>
                        <div class="btn-progress-bg" id="transcribeBtnProgress"></div>
                        <span class="btn-content">
                            <i class="fas fa-magic"></i>
                            <span data-zh="生成笔记" data-en="Generate Notes">生成笔记</span>
                            <span id="transcribePercent" style="margin-left: 8px; font-size: 0.9em; display: none;">0%</span>
                        </span>
                    </button>
                    
                    <button type="button" id="downloadBtn" class="btn btn-secondary btn-full btn-with-progress" onclick="handleDownloadClick()" disabled>
                        <div class="btn-progress-bg" id="downloadBtnProgress"></div>
                        <span class="btn-content">
                            <i class="fas fa-download"></i>
                            <span data-zh="下载视频" data-en="Download Video">下载视频</span>
                        </span>
                    </button>
                </form>
            </div>

            <!-- 本地路径输入区域 -->
            <div class="card" id="localPathSection" style="display: none;">
                <div class="form-group">
                    <label for="localVideoPath" data-zh="本地文件路径" data-en="Local File Path">本地文件路径</label>
                    <input 
                        type="text" 
                        id="localVideoPath" 
                        class="form-control" 
                        placeholder="请输入本地视频文件的绝对路径..."
                        data-zh-placeholder="请输入本地视频文件的绝对路径..."
                        data-en-placeholder="Enter local video file absolute path..."
                        style="font-family: 'Monaco', 'Menlo', monospace; font-size: 14px;"
                    >
                    <button type="button" id="localPreviewBtn" class="btn btn-secondary btn-full" onclick="previewLocalVideo()" style="margin-top: 16px;">
                        <span class="btn-content">
                            <i class="fas fa-eye"></i>
                            <span data-zh="预览" data-en="Preview">预览</span>
                        </span>
                    </button>
                    <div style="background: rgba(76, 140, 245, 0.05); padding: 12px; border-radius: 8px; border-left: 3px solid var(--accent-blue); margin-top: 12px; font-size: 0.85rem;">
                        <p style="margin: 0 0 8px 0; font-weight: 600; color: var(--text-primary);">
                            <i class="fas fa-info-circle" style="color: var(--accent-blue);"></i>
                            <span data-zh="示例路径:" data-en="Example paths:">示例路径:</span>
                        </p>
                        <ul style="margin: 0; padding-left: 20px; color: var(--text-secondary); line-height: 1.6;">
                            <li><strong>Mac/Linux:</strong> /Users/zhangsan/Videos/lecture.mp4</li>
                            <li><strong>Windows:</strong> C:\Users\zhangsan\Videos\lecture.mp4</li>
                            <li><strong>Docker挂载:</strong> /app/videos/lecture.mp4</li>
                        </ul>
                        <p style="margin: 8px 0 0 0; font-size: 0.8rem; color: var(--text-muted);">
                            <i class="fas fa-check-circle"></i>
                            <span data-zh="支持格式: MP4, AVI, MOV, MKV, MP3, WAV 等" data-en="Supported formats: MP4, AVI, MOV, MKV, MP3, WAV, etc.">支持格式: MP4, AVI, MOV, MKV, MP3, WAV 等</span>
                        </p>
                    </div>
                </div>
                
                <div class="form-group">
                    <label for="localSummaryLanguage" data-zh="摘要语言" data-en="Summary Language">摘要语言</label>
                    <select id="localSummaryLanguage" class="form-control">
                        <option value="zh">中文</option>
                        <option value="en">English</option>
                        <option value="ja">日本語</option>
                        <option value="ko">한국어</option>
                        <option value="es">Español</option>
                        <option value="fr">Français</option>
                        <option value="de">Deutsch</option>
                        <option value="it">Italiano</option>
                        <option value="pt">Português</option>
                        <option value="ru">Русский</option>
                        <option value="ar">العربية</option>
                    </select>
                </div>

                <button type="button" id="localTranscribeBtn" class="btn btn-secondary btn-full btn-with-progress" onclick="processLocalVideo()" disabled>
                    <div class="btn-progress-bg" id="localTranscribeBtnProgress"></div>
                    <span class="btn-content">
                        <i class="fas fa-magic"></i>
                        <span data-zh="生成笔记" data-en="Generate Notes">生成笔记</span>
                        <span id="localTranscribePercent" style="margin-left: 8px; font-size: 0.9em; display: none;">0%</span>
                    </span>
                </button>
            </div>
        </div>

        <!-- 右侧内容区域 -->
        <div class="right-panel">
            <!-- 暂无视频占位（工作界面默认显示）-->
            <div class="empty-state" id="emptyState">
                <i class="fas fa-video"></i>
                <p data-zh="暂无视频" data-en="No Video">暂无视频</p>
                <span class="hint" data-zh="请在左侧输入视频链接，点击预览开始" data-en="Please enter video URL on the left and click preview to start">请在左侧输入视频链接，点击预览开始</span>
            </div>

            <!-- 产品特性展示（隐藏，首页时使用）-->
            <div class="features-showcase" id="featuresShowcase" style="display: none;">
                <h2 data-zh="强大的AI视频处理能力" data-en="Powerful AI Video Processing">强大的AI视频处理能力</h2>
                <p data-zh="利用先进的AI技术，自动分析视频内容，生成精准的笔记、摘要和翻译" data-en="Leverage advanced AI technology to automatically analyze video content and generate accurate notes, summaries and translations">
                    利用先进的AI技术，自动分析视频内容，生成精准的笔记、摘要和翻译
                </p>
                
                <div class="features-grid">
                    <div class="feature-card">
                        <div class="feature-icon">
                            <i class="fas fa-brain"></i>
                        </div>
                        <div class="feature-title" data-zh="智能转录" data-en="Smart Transcription">智能转录</div>
                        <div class="feature-description" data-zh="精准识别视频语音内容，支持多种语言，自动生成完整文字稿" data-en="Accurately recognize video speech content, support multiple languages, automatically generate complete transcripts">
                            精准识别视频语音内容，支持多种语言，自动生成完整文字稿
                        </div>
                    </div>
                    
                    <div class="feature-card">
                        <div class="feature-icon">
                            <i class="fas fa-compress-alt"></i>
                        </div>
                        <div class="feature-title" data-zh="智能摘要" data-en="Smart Summary">智能摘要</div>
                        <div class="feature-description" data-zh="AI自动提炼视频核心内容，生成结构化摘要，快速把握要点" data-en="AI automatically extracts core video content, generates structured summaries, quickly grasp key points">
                            AI自动提炼视频核心内容，生成结构化摘要，快速把握要点
                        </div>
                    </div>
                    
                    <div class="feature-card">
                        <div class="feature-icon">
                            <i class="fas fa-language"></i>
                        </div>
                        <div class="feature-title" data-zh="多语言翻译" data-en="Multi-language Translation">多语言翻译</div>
                        <div class="feature-description" data-zh="支持11种语言翻译，打破语言障碍，轻松学习全球优质内容" data-en="Support translation in 11 languages, break language barriers, easily learn quality content from around the world">
                            支持11种语言翻译，打破语言障碍，轻松学习全球优质内容
                        </div>
                    </div>
                    
                    <div class="feature-card">
                        <div class="feature-icon">
                            <i class="fas fa-download"></i>
                        </div>
                        <div class="feature-title" data-zh="视频下载" data-en="Video Download">视频下载</div>
                        <div class="feature-description" data-zh="支持多种视频平台，自由选择下载质量，轻松保存到本地" data-en="Support multiple video platforms, freely choose download quality, easily save to local">
                            支持多种视频平台，自由选择下载质量，轻松保存到本地
                        </div>
                    </div>
                    
                    <div class="feature-card">
                        <div class="feature-icon">
                            <i class="fas fa-bolt"></i>
                        </div>
                        <div class="feature-title" data-zh="极速处理" data-en="Lightning Fast">极速处理</div>
                        <div class="feature-description" data-zh="高效的处理引擎，实时进度反馈，分分钟完成视频处理任务" data-en="Efficient processing engine, real-time progress feedback, complete video processing tasks in minutes">
                            高效的处理引擎，实时进度反馈，分分钟完成视频处理任务
                        </div>
                    </div>
                    
                    <div class="feature-card">
                        <div class="feature-icon">
                            <i class="fas fa-file-export"></i>
                        </div>
                        <div class="feature-title" data-zh="便捷导出" data-en="Easy Export">便捷导出</div>
                        <div class="feature-description" data-zh="一键导出Markdown格式，完美适配笔记软件，随时回顾学习" data-en="Export in Markdown format with one click, perfectly compatible with note-taking software, review anytime">
                            一键导出Markdown格式，完美适配笔记软件，随时回顾学习
                        </div>
                    </div>
                </div>
                
                <button class="cta-button" onclick="document.getElementById('videoUrl').focus()">
                    <i class="fas fa-rocket"></i>
                    <span data-zh="立即开始" data-en="Get Started">立即开始</span>
                </button>
            </div>

            <div class="video-section">
                <!-- 加载状态 -->
                <div class="loading-container" id="loadingContainer">
                    <div class="loading-spinner"></div>
                    <div class="loading-text" data-zh="正在获取视频信息..." data-en="Getting video info...">正在获取视频信息...</div>
                    <div class="loading-subtext" data-zh="请稍候片刻" data-en="Please wait a moment">请稍候片刻</div>
                </div>

                <!-- 视频预览区域 -->
                <div class="video-preview" id="videoPreview">
                    <!-- 视频播放器 -->
                    <div class="video-player" id="videoPlayer" style="margin-bottom: 20px;">
                        <!-- 嵌入播放器 -->
                    </div>
                    
                    <!-- 视频信息 -->
                    <div class="video-info">
                        <h3 class="video-title" id="videoTitle"></h3>
                        <p class="video-description" id="videoDescription"></p>
                        <div class="video-meta" id="videoMeta" style="margin-top: 12px;">
                        </div>
                    </div>
                    
                    <!-- 笔记生成进度区域 - 透明展示，无背景框 -->
                    <div class="progress-section" id="progressSection" style="background: transparent; border: none; padding: 0; margin-top: 24px; box-shadow: none;">
                        <!-- 步骤进度展示 -->
                        <div class="progress-steps" id="progressSteps">
                            <div class="progress-step" data-step="download">
                                <div class="step-icon">
                                    <i class="fas fa-download"></i>
                                    <div class="step-spinner"></div>
                                </div>
                                <div class="step-content">
                                    <div class="step-title">ViNote获取视频信息</div>
                                    <div class="step-description">正在获取视频信息...</div>
                                </div>
                                <div class="step-status">
                                    <i class="fas fa-check"></i>
                                </div>
                                <div class="step-connector">
                                    <div class="step-connector-dot"></div>
                                    <div class="step-connector-dot"></div>
                                    <div class="step-connector-dot"></div>
                                </div>
                            </div>
                            
                            <div class="progress-step" data-step="transcribe">
                                <div class="step-icon">
                                    <i class="fas fa-microphone"></i>
                                    <div class="step-spinner"></div>
                                </div>
                                <div class="step-content">
                                    <div class="step-title">ViNote预处理视频</div>
                                    <div class="step-description">AI正在提取音频内容...</div>
                                </div>
                                <div class="step-status">
                                    <i class="fas fa-check"></i>
                                </div>
                                <div class="step-connector">
                                    <div class="step-connector-dot"></div>
                                    <div class="step-connector-dot"></div>
                                    <div class="step-connector-dot"></div>
                                </div>
                            </div>
                            
                            <div class="progress-step" data-step="optimize">
                                <div class="step-icon">
                                    <i class="fas fa-magic"></i>
                                    <div class="step-spinner"></div>
                                </div>
                                <div class="step-content">
                                    <div class="step-title">ViNote智能处理</div>
                                    <div class="step-description">AI正在整理和美化笔记...</div>
                                </div>
                                <div class="step-status">
                                    <i class="fas fa-check"></i>
                                </div>
                                <div class="step-connector">
                                    <div class="step-connector-dot"></div>
                                    <div class="step-connector-dot"></div>
                                    <div class="step-connector-dot"></div>
                                </div>
                            </div>
                            
                            <div class="progress-step" data-step="summarize">
                                <div class="step-icon">
                                    <i class="fas fa-compress-alt"></i>
                                    <div class="step-spinner"></div>
                                </div>
                                <div class="step-content">
                                    <div class="step-title">ViNote提炼内容</div>
                                    <div class="step-description">AI正在提炼核心要点...</div>
                                </div>
                                <div class="step-status">
                                    <i class="fas fa-check"></i>
                                </div>
                                <div class="step-connector">
                                    <div class="step-connector-dot"></div>
                                    <div class="step-connector-dot"></div>
                                    <div class="step-connector-dot"></div>
                                </div>
                            </div>
                            
                            <div class="progress-step" data-step="complete">
                                <div class="step-icon">
                                    <i class="fas fa-check-circle"></i>
                                    <div class="step-spinner"></div>
                                </div>
                                <div class="step-content">
                                    <div class="step-title">ViNote处理完成</div>
                                    <div class="step-description">笔记生成完成！</div>
                                </div>
                                <div class="step-status">
                                    <i class="fas fa-check"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 下载进度区域 -->
                <div class="download-section" id="downloadSection">
                    <div class="progress-header">
                        <h3 data-zh="下载进度" data-en="Download Progress">下载进度</h3>
                        <span class="progress-status" id="downloadStatus">0%</span>
                    </div>
                    <div class="progress-container">
                        <div class="progress-bar">
                            <div class="progress-fill" id="downloadProgressFill"></div>
                        </div>
                    </div>
                    <div class="progress-details">
                        <span id="downloadSpeed">速度: 0MB/s</span>
                        <span id="downloadETA">剩余: --:--</span>
                        <span id="downloadSize">大小: 0MB / 0MB</span>
                    </div>
                    <div class="progress-message" id="downloadMessage">正在下载...</div>
                    <div style="margin-top: 20px;">
                        <button class="btn btn-danger btn-sm" onclick="cancelDownload()">
                            <i class="fas fa-times"></i>
                            <span data-zh="取消下载" data-en="Cancel Download">取消下载</span>
                        </button>
                    </div>
                </div>

                <!-- 结果显示区域 -->
                <div class="results-section" id="resultsSection">
                    <div class="content-tabs">
                        <button class="tab-button active" onclick="showTab('transcript')" id="transcriptTab">
                            <span data-zh="完整笔记" data-en="Full Notes">完整笔记</span>
                            <i class="fas fa-download tab-download-icon" onclick="event.stopPropagation(); downloadContent('transcript')" title="下载完整笔记"></i>
                        </button>
                        <button class="tab-button" onclick="showTab('summary')" id="summaryTab">
                            <span data-zh="精华摘要" data-en="Summary">精华摘要</span>
                            <i class="fas fa-download tab-download-icon" onclick="event.stopPropagation(); downloadContent('summary')" title="下载摘要"></i>
                        </button>
                        <button class="tab-button" onclick="showTab('raw')" id="rawTab">
                            <span data-zh="原文转录" data-en="Raw Transcript">原文转录</span>
                            <i class="fas fa-download tab-download-icon" onclick="event.stopPropagation(); downloadContent('raw')" title="下载原文转录"></i>
                        </button>
                        <button class="tab-button" onclick="showTab('translation')" id="translationTab" style="display: none;">
                            <span data-zh="翻译版本" data-en="Translation">翻译版本</span>
                            <i class="fas fa-download tab-download-icon" onclick="event.stopPropagation(); downloadContent('translation')" title="下载翻译"></i>
                        </button>
                    </div>
                    <div class="tab-content active" id="transcriptContent">
                        <!-- 转录文本内容 -->
                    </div>
                    <div class="tab-content" id="summaryContent">
                        <!-- 摘要内容 -->
                    </div>
                    <div class="tab-content" id="rawContent">
                        <!-- 原文转录内容 -->
                    </div>
                    <div class="tab-content" id="translationContent">
                        <!-- 翻译内容 -->
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 下载质量选择模态框 -->
    <div id="downloadModal" class="modal">
        <div class="modal-content">
            <button class="close-modal" onclick="closeDownloadModal()">&times;</button>
            <h3 data-zh="选择下载质量" data-en="Select Download Quality">选择下载质量</h3>
            <div class="quality-options" id="qualityOptions">
                <!-- 动态生成的质量选项 -->
            </div>
            <div class="modal-actions">
                <button class="btn btn-secondary" onclick="closeDownloadModal()">
                    <span data-zh="取消" data-en="Cancel">取消</span>
                </button>
                <button class="btn" onclick="confirmDownload()" id="confirmDownloadBtn">
                    <i class="fas fa-download"></i>
                    <span data-zh="开始下载" data-en="Start Download">开始下载</span>
                </button>
            </div>
        </div>
    </div>

    <!-- 错误消息区域 -->
    <div id="errorMessage" class="error-message" style="display: none;"></div>
    
    <!-- 成功消息区域 -->
    <div id="successMessage" class="success-message" style="display: none;"></div>

    <!-- 开发者工具工作页面 -->
    <div id="devToolsWorkspace" class="main-container" style="display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100vh; z-index: 10;">
        <!-- 左侧面板 -->
        <div class="left-panel">
            <button class="back-to-home-btn" onclick="backToLanding()">
                <i class="fas fa-arrow-left"></i>
                <span data-zh="返回首页" data-en="Back to Home">返回首页</span>
            </button>
            
            <header class="header">
                <h1 data-zh="开发者工具" data-en="Dev Tools">开发者工具</h1>
                <p data-zh="B站Cookies转换工具" data-en="Bilibili Cookies Converter">B站Cookies转换工具</p>
            </header>
            
            <!-- 工具简介 -->
            <div class="card" style="background: linear-gradient(135deg, rgba(76, 140, 245, 0.08) 0%, rgba(6, 182, 212, 0.08) 100%); border: 1px solid rgba(76, 140, 245, 0.2);">
                <h3 style="font-size: 1rem; color: var(--accent-blue); margin-bottom: 16px; display: flex; align-items: center; gap: 8px;">
                    <i class="fas fa-info-circle"></i>
                    <span data-zh="工具说明" data-en="Tool Description">工具说明</span>
                </h3>
                <div style="font-size: 0.9rem; color: var(--text-secondary); line-height: 1.8;">
                    <p style="margin-bottom: 12px;">此工具可以将B站的Cookies转换为Netscape格式，用于yt-dlp等下载工具。</p>
                    <p style="margin-bottom: 8px; font-weight: 600; color: var(--text-primary);">使用步骤：</p>
                    <ol style="margin: 0; padding-left: 20px;">
                        <li>登录B站网页版</li>
                        <li>打开浏览器开发者工具(F12)</li>
                        <li>找到Network标签，刷新页面</li>
                        <li>复制请求头中的Cookie值</li>
                        <li>粘贴到下方输入框</li>
                        <li>点击生成按钮</li>
                    </ol>
                </div>
            </div>
            
            <!-- 输入区域 -->
            <div class="card">
                <div class="form-group">
                    <label for="cookiesInput" data-zh="B站Cookies" data-en="Bilibili Cookies">B站Cookies</label>
                    <textarea 
                        id="cookiesInput" 
                        class="form-control"
                        placeholder="粘贴从浏览器复制的Cookies..."
                        data-zh-placeholder="粘贴从浏览器复制的Cookies..."
                        data-en-placeholder="Paste cookies from browser..."
                        rows="6"
                        style="font-family: 'Monaco', 'Menlo', monospace; font-size: 13px;"
                    ></textarea>
                </div>
                
                <button type="button" id="generateCookiesBtn" class="btn-full" onclick="generateNetscapeCookies()" style="margin-top: 16px; background: linear-gradient(135deg, rgba(20, 20, 20, 0.95) 0%, rgba(30, 30, 30, 0.95) 100%); border: 1px solid rgba(255, 255, 255, 0.1); color: white; padding: 16px 28px; border-radius: 12px; font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; font-family: inherit; text-transform: uppercase; letter-spacing: 0.5px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);">
                    <i class="fas fa-magic" id="generateCookiesBtnIcon"></i>
                    <span id="generateCookiesBtnText" data-zh="生成Netscape格式" data-en="Generate Netscape Format">生成Netscape格式</span>
                </button>
            </div>
        </div>
        
        <!-- 右侧面板 - 流式输出区域 -->
        <div class="right-panel" style="padding: 40px; position: relative; display: flex; flex-direction: column;">
            <!-- 流式输出文本区域 - 直接打在背景上 -->
            <div id="devToolsOutputArea" style="flex: 1; font-family: 'Monaco', 'Menlo', monospace; font-size: 12px; line-height: 1.6; color: var(--text-primary); white-space: pre-wrap; word-wrap: break-word; overflow-y: auto; display: none;">
                <!-- 流式文本将显示在这里 -->
            </div>
            
            <!-- 初始空状态 -->
            <div id="devToolsEmptyState" style="flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;">
                <i class="fas fa-cookie-bite" style="font-size: 80px; color: var(--text-muted); opacity: 0.3; margin-bottom: 24px;"></i>
                <p style="font-size: 1.2rem; color: var(--text-secondary); margin-bottom: 12px;" data-zh="等待转换" data-en="Waiting for Conversion">等待转换</p>
                <span style="font-size: 0.95rem; color: var(--text-muted);" data-zh="请在左侧输入Cookies并点击生成" data-en="Enter cookies on the left and click generate">请在左侧输入Cookies并点击生成</span>
            </div>
            
            <!-- 复制按钮 - 完成后显示在右下角 -->
            <button 
                id="devToolsCopyBtn"
                onclick="copyNetscapeCookies()" 
                style="position: fixed; bottom: 40px; right: 40px; display: none; z-index: 1000; min-width: 140px; background: linear-gradient(135deg, rgba(34, 197, 94, 0.9) 0%, rgba(22, 163, 74, 0.9) 100%); color: white; border: none; padding: 16px 28px; border-radius: 12px; font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 4px 16px rgba(34, 197, 94, 0.25); font-family: inherit; text-transform: uppercase; letter-spacing: 0.5px;"
                onmouseover="this.style.transform='translateY(-2px)'; this.style.boxShadow='0 8px 24px rgba(34, 197, 94, 0.4)';"
                onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 4px 16px rgba(34, 197, 94, 0.25)';"
            >
                <i class="fas fa-copy" style="margin-right: 8px;"></i>
                <span data-zh="复制内容" data-en="Copy">复制内容</span>
            </button>
        </div>
    </div>

    <!-- AI视频搜索Agent工作页面 -->
    <div id="searchAgentWorkspace" class="main-container" style="display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100vh; z-index: 10;">
        <!-- 左侧面板: ViNoter功能简介 -->
        <div class="left-panel">
            <button class="back-to-home-btn" onclick="backToLanding()">
                <i class="fas fa-arrow-left"></i>
                <span data-zh="返回首页" data-en="Back to Home">返回首页</span>
            </button>
            
            <header class="header">
                <h1 data-zh="ViNoter超级智搜" data-en="ViNoter Super Search">ViNoter超级智搜</h1>
                <p data-zh="智能搜索并自动生成笔记" data-en="Smart search & auto notes">智能搜索并自动生成笔记</p>
            </header>
            
            <!-- ViNoter能力简介 -->
            <div class="card" style="background: linear-gradient(135deg, rgba(76, 140, 245, 0.08) 0%, rgba(6, 182, 212, 0.08) 100%); border: 1px solid rgba(76, 140, 245, 0.2);">
                <h3 style="font-size: 1rem; color: var(--accent-blue); margin-bottom: 16px; display: flex; align-items: center; gap: 8px;">
                    <i class="fas fa-robot"></i>
                    <span data-zh="ViNoter 能为您做什么" data-en="What ViNoter Can Do">ViNoter 能为您做什么</span>
                </h3>
                <div style="display: flex; flex-direction: column; gap: 16px;">
                    <div style="display: flex; gap: 12px; align-items: start;">
                        <div style="width: 36px; height: 36px; background: rgba(76, 140, 245, 0.15); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0;">
                            <i class="fas fa-search" style="color: var(--accent-blue); font-size: 16px;"></i>
                        </div>
                        <div>
                            <div style="font-weight: 600; color: var(--text-primary); margin-bottom: 4px;" data-zh="🎯 智能视频搜索" data-en="🎯 Smart Video Search">🎯 智能视频搜索</div>
                            <div style="font-size: 0.85rem; color: var(--text-secondary); line-height: 1.6;" data-zh="覆盖B站、YouTube等主流平台，精准找到您想要的学习视频" data-en="Cover mainstream platforms, find learning videos accurately">覆盖B站、YouTube等主流平台，精准找到您想要的学习视频</div>
                        </div>
                    </div>
                    
                    <div style="display: flex; gap: 12px; align-items: start;">
                        <div style="width: 36px; height: 36px; background: rgba(34, 197, 94, 0.15); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0;">
                            <i class="fas fa-file-alt" style="color: var(--accent-green); font-size: 16px;"></i>
                        </div>
                        <div>
                            <div style="font-weight: 600; color: var(--text-primary); margin-bottom: 4px;" data-zh="📝 自动生成笔记" data-en="📝 Auto Generate Notes">📝 自动生成笔记</div>
                            <div style="font-size: 0.85rem; color: var(--text-secondary); line-height: 1.6;" data-zh="AI提取视频核心内容，生成结构化笔记和摘要，告别手动记录" data-en="AI extracts core content, generates structured notes">AI提取视频核心内容，生成结构化笔记和摘要，告别手动记录</div>
                        </div>
                    </div>
                    
                    <div style="display: flex; gap: 12px; align-items: start;">
                        <div style="width: 36px; height: 36px; background: rgba(251, 146, 60, 0.15); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0;">
                            <i class="fas fa-comments" style="color: var(--accent-orange); font-size: 16px;"></i>
                        </div>
                        <div>
                            <div style="font-weight: 600; color: var(--text-primary); margin-bottom: 4px;" data-zh="💬 智能对话交互" data-en="💬 Smart Chat">💬 智能对话交互</div>
                            <div style="font-size: 0.85rem; color: var(--text-secondary); line-height: 1.6;" data-zh="自然语言描述需求，AI理解意图并自动执行，就像和朋友聊天一样简单" data-en="Natural language interaction, AI understands and executes">自然语言描述需求，AI理解意图并自动执行，就像和朋友聊天一样简单</div>
                        </div>
                    </div>
                    
                    <div style="display: flex; gap: 12px; align-items: start;">
                        <div style="width: 36px; height: 36px; background: rgba(6, 182, 212, 0.15); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0;">
                            <i class="fas fa-download" style="color: var(--accent-cyan); font-size: 16px;"></i>
                        </div>
                        <div>
                            <div style="font-weight: 600; color: var(--text-primary); margin-bottom: 4px;" data-zh="💾 一键保存导出" data-en="💾 One-Click Export">💾 一键保存导出</div>
                            <div style="font-size: 0.85rem; color: var(--text-secondary); line-height: 1.6;" data-zh="完整笔记、精华摘要、原文转录，多种格式随心下载" data-en="Notes, summaries, transcripts in multiple formats">完整笔记、精华摘要、原文转录，多种格式随心下载</div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 使用提示 -->
            <div class="card" style="background: rgba(76, 140, 245, 0.05); border: 1px solid rgba(76, 140, 245, 0.15);">
                <h3 style="font-size: 0.9rem; color: var(--text-secondary); margin-bottom: 12px; display: flex; align-items: center; gap: 6px;">
                    <i class="fas fa-lightbulb" style="font-size: 14px;"></i>
                    <span data-zh="💡 快速上手" data-en="💡 Quick Start">💡 快速上手</span>
                </h3>
                <ol style="margin: 0; padding-left: 20px; color: var(--text-secondary); font-size: 0.85rem; line-height: 1.8;">
                    <li data-zh="告诉我您想学习的内容" data-en="Tell me what you want to learn">告诉我您想学习的内容</li>
                    <li data-zh="我会搜索并展示相关视频" data-en="I'll search and show videos">我会搜索并展示相关视频</li>
                    <li data-zh="点击「生成笔记」开始处理" data-en="Click 'Generate Notes' to start">点击「生成笔记」开始处理</li>
                    <li data-zh="下载笔记，开始高效学习" data-en="Download notes, start learning">下载笔记，开始高效学习</li>
                </ol>
            </div>
        </div>
        
        <!-- 右侧面板: 对话区域 -->
        <div class="right-panel" style="padding: 0; background: var(--bg-secondary); display: grid; grid-template-rows: auto 1fr auto;">
            <!-- 对话头部 -->
            <div style="padding: 24px 32px; border-bottom: 1px solid var(--border-primary); background: var(--bg-primary);">
                <h2 style="font-size: 1.3rem; color: var(--text-primary); margin-bottom: 8px;">
                    <i class="fas fa-robot" style="color: var(--accent-cyan); margin-right: 10px;"></i>
                    <span data-zh="智能对话" data-en="Smart Chat">智能对话</span>
                </h2>
                <p style="font-size: 0.9rem; color: var(--text-secondary); margin: 0;">
                    <span data-zh="搜索视频 → 选择处理 → 获取笔记" data-en="Search → Select → Get Notes">搜索视频 → 选择处理 → 获取笔记</span>
                </p>
            </div>
            
            <!-- 消息滚动区域 -->
            <div id="agentMessagesContainer" class="messages-container" style="overflow-y: auto; padding: 24px 32px;">
                <!-- 消息将动态添加 -->
            </div>
            
            <!-- 输入区域 -->
            <div style="padding: 20px 32px 24px; background: var(--bg-secondary); border-top: 1px solid var(--border-primary);">
                <div style="display: flex; gap: 12px; align-items: center;">
                    <textarea 
                        id="agentInput" 
                        class="form-control"
                        placeholder="输入您的需求，例如: 我想学习Python编程..."
                        data-zh-placeholder="输入您的需求，例如: 我想学习Python编程..."
                        data-en-placeholder="Enter your needs, e.g.: I want to learn Python..."
                        rows="3"
                        style="resize: none; border-radius: 12px; flex: 1; font-size: 15px; padding: 14px 18px;"
                    ></textarea>
                    <div style="display: flex; gap: 8px;">
                        <button id="agentSendBtn" class="btn btn-secondary" onclick="sendAgentMessage()" style="min-width: 70px; border-radius: 10px; padding: 10px 16px; white-space: nowrap; font-size: 13px; height: 40px;">
                            <i class="fas fa-paper-plane" style="font-size: 12px;"></i>
                            <span data-zh="发送" data-en="Send">发送</span>
                        </button>
                        <button class="btn btn-secondary" onclick="clearAgentConversation()" style="min-width: 70px; border-radius: 10px; padding: 10px 16px; white-space: nowrap; font-size: 13px; height: 40px;">
                            <i class="fas fa-broom" style="font-size: 12px;"></i>
                            <span data-zh="清空" data-en="Clear">清空</span>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- JavaScript全局变量 -->
    <script>
        // 存储生成的Netscape格式cookies
        let generatedNetscapeCookies = '';
    </script>

    <!-- 模块化JavaScript文件 -->
    <!-- 1. 工具函数（最先加载，其他模块依赖）-->
    <script src="/static/js/utils/helpers.js"></script>
    
    <!-- 2. 核心类 -->
    <script src="/static/js/core/VideoTranscriber.js"></script>
    
    <!-- 3. 功能模块 -->
    <script src="/static/js/modules/videoPreview.js"></script>
    <script src="/static/js/modules/transcription.js"></script>
    <script src="/static/js/modules/progress.js"></script>
    <script src="/static/js/modules/results.js"></script>
    <script src="/static/js/modules/videoDownload.js"></script>
    <script src="/static/js/modules/ui.js"></script>
    <script src="/static/js/modules/localPath.js"></script>
    <script src="/static/js/modules/qaLocalPath.js"></script>
    <script src="/static/js/modules/searchAgent.js"></script>
    <script src="/static/js/modules/devTools.js"></script>

    <!-- 4. 主入口 -->
    <script src="/static/js/app.js"></script>
